用Twitter组成规则集编写Cleaner JetPack组成代码
#kotlin #android #mobile #tristan

目录

  1. Introduction
  2. Code we will be refactoring
  3. Mistake 1
  4. Mistake 2
  5. Mistake 3
  6. Mistake 4
  7. Refactored code

简介

  • 最近，我一直在尝试寻找方法来重构我的JetPack组合功能，值得庆幸的是，我偶然发现了Twitter Compose composeset，可以找到HERE。
  • Twitter Compose Ruleset实际是什么，是一组自定义的KTLINT规则，以确保您的组合不会陷入常见的陷阱，这在代码评论中可能很容易错过。您甚至可以找到有关如何使用Ktlin HERE进行设置的教程。但是目前，我们将专注于我最新应用中的一些代码。

我在北美针对养牛场的最新应用程序

github

我们将要重构的代码：

  • 以下代码是我们将通过应用HERE的规则来重构的代码 
@Composable
fun CalendarDock(viewModel: EditCalfViewModel){
val calfDate = viewModel.uiState.value.birthDate!!
    val convertedDate = calfDate.toInstant().atZone(ZoneId.systemDefault()).toLocalDate();
    val selectedDate = remember {
        mutableStateOf<LocalDate?>(convertedDate)
    }
    val calendarState = rememberSheetState()

    CalendarDialog(
        state = calendarState,
        config = CalendarConfig(
            monthSelection = true,
            yearSelection = true
        ),
        selection = CalendarSelection.Date(selectedDate = selectedDate.value){ newDate ->

            selectedDate.value = newDate
            viewModel.updateDate(newDate)

        }
    )
    Row(
        horizontalArrangement = Arrangement.SpaceBetween) {
        OutlinedTextField(
            //state
            enabled = false,
            value = "Date born: "+ selectedDate.value.toString(),
            onValueChange = {  },
            //style
            singleLine = true,
            placeholder = {
                Text(text = "Date", fontSize = 20.sp)
            },
            modifier = Modifier
                .fillMaxWidth(),
            textStyle = TextStyle(fontSize = 20.sp),


            )
    }


}

错误1：将ViewModel作为参数传递

  • 在组合函数的签名中注意我正在视图模型中作为参数传递： 
fun CalendarDock(viewModel: EditCalfViewModel)

错误2：无修饰符参数

  • 注意以上代码如何没有modifier参数。编写代码时，这是一个严重的危险信号。每个可复合的函数（是的，我的确是指每个组合函数）都应具有修饰符参数。这样做的主要原因是因为它促进了灵活性和代码重复使用，但是如果您想深入了解，我建议您阅读博客文章HERE

错误3：修饰符参数的位置

  • 添加修饰符参数时，我们应确保将其添加在正确的位置。当添加参数以组合函数时，强制性参数首先出现，然后出现修饰符参数。修饰符参数应占据第一个可选参数插槽，以为其他开发人员设置一致的例外。这意味着随着我们的项目发展，我们为团队增加了更多人，他们可以期待一致的编程经验。

错误4：修饰符应具有默认参数

  • 作为规则状态：
    Composables that accept a Modifier as a parameter to be applied to the whole component represented by the composable function should name the parameter modifier and assign the parameter a default value of Modifier.

  • 如果您有一个修饰符参数，则应给它一个修饰符的默认值

重构代码：

  • 因此，所有这些规则都应用了我们的重构代码，现在看起来像这样： 
@Composable
fun CalendarDock2(dateBorn: Date,selectedAction:(LocalDate)->Unit,modifier: Modifier = Modifier){

    val convertedDate = dateBorn.toInstant().atZone(ZoneId.systemDefault()).toLocalDate();
    val selectedDate = remember { mutableStateOf<LocalDate?>(convertedDate) }
    val calendarState = rememberSheetState()

    CalendarDialog(
        state = calendarState,
        config = CalendarConfig(
            monthSelection = true,
            yearSelection = true
        ),
        selection = CalendarSelection.Date(selectedDate = selectedDate.value){ newDate ->

            selectedDate.value = newDate
            selectedAction(newDate)

        }
    )
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        OutlinedTextField(
            //state
            enabled = false,
            value = "Date born: "+ selectedDate.value.toString(),
            onValueChange = {  },
            //style
            singleLine = true,
            placeholder = {
                Text(text = "Date", fontSize = 20.sp)
            },
            modifier = modifier,
            textStyle = TextStyle(fontSize = 20.sp),


            )
    }


}

结论

  • 感谢您抽出宝贵的时间阅读我的博客文章。如果您有任何疑问或疑虑，请在下面发表评论或在Twitter上与我联系。