Android Compose 基础 搜索组件【转】

前言

近来 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

本文转自 weichao.blog.csdn.net/article/det…，如有侵权，请联系删除。