介绍
- 最近，我为我的Android应用程序创建了一个新功能，这是我创建它的过程。该过程包括3个主要步骤，
1) Design，2) Implement，3) Refactor2 - 这篇博客文章的重点是简短，并为初学者提供一种系统的方式，他们可以使用自定义的JetPack组成部分。重点不会放在代码上，而是整体上的过程
我在Google Play商店上为养牛场的应用程序
GitHub代码
目录
1）设计
- 此步骤是我们设计组件将要做什么以及如何工作的地方。在设计该功能时，我喜欢用JetPack组成的标准布局元素，即（以蓝色）和列（红色）来分解所有内容。此步骤将为我们提供像这样的设计：
- 虽然现在看起来有些简单而愚蠢，但蓝色行和红色列不仅可以帮助我们构建组件，而且还向我们展示我们开始重构时从哪里开始
2）实施
- 该过程中的这一部分是关于采用设计并使其正常工作。将所有有关清洁编码实践的想法丢弃，只是让Dang的事情有效。这是允许意大利面条代码的地方，事实上，这是我最近功能的意大利面条代码。您不需要了解此代码的作用，只需注意到了解其实际上是多么困难：
fun VaccinationCheck(){
var vaccineText by remember { mutableStateOf("") }
var dateText by remember { mutableStateOf(Date().toString()) }
val vaccineList = remember { mutableStateListOf<String>()}
val convertedDate = Date().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
dateText = newDate.toString()
}
)
Column(){
Row(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
) {
//I NEED A TEXT INPUT AND A DATE INPUT
OutlinedTextField(
modifier = Modifier.weight(1.5f),
singleLine = true,
value = vaccineText,
onValueChange = { vaccineText = it },
textStyle = TextStyle(fontSize = 20.sp),
placeholder = {
Text(text = "Vaccination", fontSize = 20.sp)
}
)
OutlinedTextField(
modifier = Modifier
.clickable { calendarState.show() }
.weight(1f),
enabled = false,
value = selectedDate.value.toString(),
onValueChange = { dateText = it },
textStyle = TextStyle(fontSize = 20.sp),
placeholder = {
Text(text = dateText, fontSize = 20.sp)
}
)
}
//INSIDE THE COLUMN
Row(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
){
Spacer(Modifier.weight(1.5f))
Button(
enabled = vaccineText.length >1,
onClick = {
val text = "$vaccineText " + selectedDate.value
val check = vaccineList.indexOf(text)
if(check == -1){
vaccineList.add(text)
}
},
modifier = Modifier.weight(1f)
) {
Text(text = "Vaccinate")
}
}
LazyColumn(modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 8.dp)
.height(150.dp)
){
itemsIndexed(
items = vaccineList,
key ={index:Int,item:String ->item.hashCode() + index}
){ index:Int, item:String ->
/***********SETTING UP SWIPE TO DISMISS****************/
val currentVaccine by rememberUpdatedState(item)//references the current vaccine
val dismissState = rememberDismissState(
confirmStateChange = {
vaccineList.remove(item)
true
}
)
SwipeToDismiss(state = dismissState, background ={} ) {
Box(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 8.dp)
.border(
BorderStroke(2.dp, Color.LightGray),
shape = RoundedCornerShape(8)
)
){
Text(text = item, fontSize = 20.sp,modifier = Modifier.padding(8.dp))
}
}
}
}
}
}
- 您可以从上面的代码中看到，它是一个迷宫，几乎不可能理解发生了什么。但猜猜怎么了？有用！！这意味着我们可以继续下一步
3）重构
- 这是我们必须开始实施一些良好的编码实践的步骤。为了编写干净的撰写代码，我推荐这两个资源：
1） Twitter Compose Ruleset
2） Always provide a Modifier parameter
- 使用上面的资源我的撰写功能现在看起来像这样：
@OptIn(ExperimentalMaterialApi::class)
@RequiresApi(Build.VERSION_CODES.O)
@Composable
fun VaccinationCheck(){
var vaccineText by remember { mutableStateOf("") }
var dateText1 by remember { mutableStateOf(Date().toString()) }
val vaccineList = remember { mutableStateListOf<String>()}
val convertedDate = Date().toInstant().atZone(ZoneId.systemDefault()).toLocalDate();
val selectedDate = remember { mutableStateOf<LocalDate?>(convertedDate) }
val calendarState = rememberSheetState()
CalendarView(
calendarState,
selectedDate = selectedDate,
updateDateText = {
newDate -> dateText1 = newDate
}
)
Column(){
VaccineRow(
vaccineText =vaccineText,
updateText = {text -> vaccineText = text},
calendarState = calendarState,
selectedDate = selectedDate,
dateText = dateText1,
updateDateText = {dateText ->dateText1 = dateText },
modifier = Modifier.fillMaxWidth()
)
VaccineButtonRow(
vaccineText = vaccineText,
addToVaccineList ={
val text = "$vaccineText " + selectedDate.value
val check = vaccineList.indexOf(text)
if(check == -1){
vaccineList.add(text)
}
},
modifier = Modifier.fillMaxWidth()
)
VaccineLazyColumn(
vaccineList = vaccineList,
removeItemFromList ={item -> vaccineList.remove(item)},
modifier = Modifier.fillMaxWidth()
)
}
}
-
更好吗？我使用了设计阶段的行和列来重构我们的代码。将每个行和列放入自己的组件
-
我希望这篇简短的博客文章为您提供了创建清洁器组成代码的起点。
结论
- 感谢您抽出宝贵的时间阅读我的博客文章。如果您有任何疑问或疑虑，请在下面发表评论或在Twitter上与我联系。