Compose搜索界面

项目实战中用compose还不是很习惯，感觉写界面比xml还费劲，是不是我打开方式不对。

这次分享下搜索界面

一、先看下效果图

搜索图片.png

二、解决方案分析

看似简单，实则还是有丢丢难度的。比如后面的删除图片要随着内容是否存在而显示。

三、代码如下：

@Composable
fun SearchBar(onBack: () -> Unit, searchUID: (String) -> Unit) {
var value by rememberSaveable { mutableStateOf("") }
val context = LocalContext.current
Row(
    modifier = Modifier
        .padding(top = 12.dp)
        .fillMaxWidth()
        .statusBarsPadding()
        .height(43.dp),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.Center,
) {
    Spacer(modifier = Modifier.size(width = 17.dp, height = 1.dp))
    MyIconButton(
        onClick = {
            onBack()
        },
    ) {
        Icon(
            painter = painterResource(id = R.mipmap.ic_back),
            contentDescription = "返回"
        )
    }
    Spacer(modifier = Modifier.size(width = 17.dp, height = 1.dp))
    Row(
        modifier = Modifier
            .weight(1f)
            .fillMaxWidth()
            .height(36.dp)
            .background(
                color = colorResource(id = R.color.color_F6),
                shape = RoundedCornerShape(22.dp)
            ),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Image(
            modifier = Modifier
                .padding(start = 12.dp, end = 2.dp)
                .size(16.dp, 16.dp),
            painter = painterResource(id = R.mipmap.ic_uid_search),
            contentDescription = "搜索",
            contentScale = ContentScale.Crop
        )
        Box(
            modifier = Modifier
                .fillMaxWidth(),
            contentAlignment = Alignment.CenterStart
        ) {

            if (value.isEmpty()) {
                Text(
                    text = stringResource(id = R.string.search_uid_hint),
                    fontSize = 14.sp,
                    color = colorResource(id = R.color.color_AEAEB2),
                    modifier = Modifier.padding(5.dp)
                )
            } else {
                Row(
                    modifier = Modifier.fillMaxSize(),
                    horizontalArrangement = Arrangement.End,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Image(
                        painterResource(id = R.mipmap.ic_uid_search_del),
                        contentDescription = "",
                        modifier = Modifier
                            .padding(end = 5.dp)
                            .clickable {
                                value = ""
                            }
                            .size(16.dp)
                    )
                }
            }
            val requester = FocusRequester()
            LaunchedEffect(Unit) {
                requester.requestFocus()
            }
            BasicTextField(
                value = value,
                onValueChange = { value = it },
                maxLines = 1,
                keyboardOptions = KeyboardOptions(
                    capitalization = KeyboardCapitalization.Characters,
                    keyboardType = KeyboardType.Email,
                    autoCorrect = true,
                    imeAction = ImeAction.Search
                ),

                keyboardActions = KeyboardActions(onSearch = {
                    searchUID(value)
                }),
                singleLine = true,
                cursorBrush = SolidColor(MaterialTheme.colors.primary),
                textStyle = TextStyle(color = colorResource(id = R.color.color_1C1C1E), fontSize = 14.sp),
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 5.dp, end = 45.dp)
                    .focusRequester(requester)
            )
        }
    }
    Spacer(modifier = Modifier.size(width = 16.dp, height = 1.dp))
    Text(
        modifier = Modifier
            .wrapContentWidth(Alignment.End)
            .clickable(
                interactionSource = MutableInteractionSource(),
                indication = null
            ) {
                searchUID(value)
            },
        text = stringResource(id = R.string.search),
        color = colorResource(id = R.color.color_556FF6),
        fontSize = 16.sp
    )
    Spacer(modifier = Modifier.size(width = 16.dp, height = 1.dp))

}

}

完整代码如上，还有问题的可私信我