前言
近来 google compose 成为了热点，作为下一代ui组件开发利器，配合kotlin语法简洁性，能最大限度的提高ui开发效率。最近 也在学习compose基础知识。脱离官方帮助文档和codeLab来谈。compose语法和View tree差异比较大。需要开发组件，管理状态， 因为compose 可组合项的更新完全依赖与状态的跟踪，引用的状态被修改，所有依赖状态的可组合项均会发生重组，界面可组合项的刷新遵循 mvi范式。个人以为如果从mvc，mvp，mvvm，mvi,自然过渡的开发者学习compose事半功倍。如果中间缺少一环，理解compose困难比较大。硬着头皮学最终 可能会从入门到放弃。
学习新东西要循序渐进，想着一下子能理解，也许只有基础扎实的同学才可以。
要实现组件：
常用的搜索框，输入内容后，占位holder被输入内容替换，并显示close icon。close icon点击可以全部取消value。键盘显示搜索键位，并监听键盘的搜索键点击。
最终效果
@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun SearchBar(
cancelListener: () -> Unit,
onSearch: () -> Unit,
closeClick: () -> Unit
) {
var textValue by remember {
mutableStateOf("")
}
Surface(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
) {
Row(
modifier = Modifier
.padding(horizontal = 10.dp)
.background(
color = colorResource(
id = R.color.f2f5ff
), shape = RoundedCornerShape(percent = 50)
)
.wrapContentHeight()
.padding(start = 15.dp),
verticalAlignment = Alignment.CenterVertically
) {
val keyboardController = LocalSoftwareKeyboardController.current
Icon(imageVector = Icons.Filled.Search, contentDescription = null)
TextField(
value = textValue,
onValueChange = { textValue = it },
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
keyboardActions = KeyboardActions(
onDone = {
keyboardController?.hide()
// do something here
onSearch()
}
), colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
), trailingIcon = {
if (textValue.isNotBlank()) {
Icon(
imageVector = Icons.Filled.Close,
contentDescription = null,
modifier = Modifier.clickable(onClick = { textValue = "" })
)
}
}, placeholder = {
Text(
"placeholder",
modifier = Modifier
.background(color = MaterialTheme.colors.onPrimary),
textAlign = TextAlign.Center
)
})
Text(
text = stringResource(id = R.string.cancel),
modifier = Modifier.clickable(onClick = closeClick)
)
}
}
}
官方样式
练习官方codeLab，发现只用TextField就可以实现，上面自己实现的效果，而且规避了设置父元素高影响到placehoder高的问题。
@Composable
fun SearchBar(
modifier: Modifier = Modifier
) {
var value by remember {
mutableStateOf("")
}
// Implement composable here
TextField(value = value, singleLine = true, onValueChange = { value = it }, modifier = modifier
.heightIn(56.dp)
.fillMaxWidth()
.padding(horizontal = 20.dp),
leadingIcon = {
Icon(imageVector = Icons.Filled.Search, contentDescription = null)
}, placeholder = { Text(text = stringResource(id = R.string.placeholder_search), textAlign = TextAlign.Center) },
colors = TextFieldDefaults.textFieldColors(
backgroundColor = MaterialTheme.colors.surface,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
), shape = RoundedCornerShape(12.dp)
)
}
总结：
熟悉compose 修饰符用法，基本组件之间搭配融合，UI界面的发出是通过被@Composable 修饰的函数发出。组件的样式通过Modifier扩展函数实现，扩展函数的调用顺序直接影响最终ui呈现效果。比如clipe( ) 要在background（）扩展函数调用。调用顺序倒置，显示效果就会出现非期望的效果。
`google codeLab
推荐文章
发表评论