我如何在 Jetpack Compose 中制作这个自定义文本搜索字段？答案

【问题标题】：How can i make this custom text search field in jetpack compose?我如何在 Jetpack Compose 中制作这个自定义文本搜索字段？
【发布时间】：2023-02-23 14:48:29
【问题描述】：

我想要这个搜索栏。

预期的： -

我尝试了下面的代码，但它没有按预期工作。

实现：-

    Row(
        horizontalArrangement = Arrangement.SpaceBy,
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
                .width(width = 277.dp)
                .height(height = 38.dp)
                .padding(end = 12.dp)
        ) {
        Image(
            painter = painterResource(id = R.drawable.elogo),
            contentDescription = "e logo",
            modifier = Modifier
                        .size(size = 46.dp))
        TextField(
            value = "",
            onValueChange = {})
        Image(
            painter = painterResource(id = R.drawable.vector),
            contentDescription = "Vector",
            alpha = 0.5f,
            modifier = Modifier
                        .width(width = 19.dp)
                        .height(height = 19.dp))
        }

我需要圆角以及两端的两个徽标。

【问题讨论】：

Ia 图像是你想要的还是你试图达到的？请张贴您尝试过的和您想要的图片。
编辑了问题！

标签： android kotlin android-jetpack-compose android-jetpack android-compose-textfield

【解决方案1】：

val (value, onValueChange) = remember { mutableStateOf("") }

TextField(
    value = value,
    onValueChange = onValueChange,
    textStyle = TextStyle(fontSize = 17.sp),
    leadingIcon = { Icon(Icons.Filled.Search, null, tint = Color.Gray) },
    modifier = Modifier
        .padding(10.dp)
        .background(Color(0xFFE7F1F1), RoundedCornerShape(16.dp)),
    placeholder = { Text(text = "Bun") },
    trailingIcon = {
        Icon(
            Icons.Filled.Search,
            null,
            tint = Color.Gray,
            modifier = Modifier.clickable { /*Click Action*/ })
    },
    colors = TextFieldDefaults.textFieldColors(
        focusedIndicatorColor = Color.Transparent,
        unfocusedIndicatorColor = Color.Transparent,
        backgroundColor = Color.Transparent,
        cursorColor = Color.DarkGray
    )
)

【讨论】：

【解决方案2】：

TextField 可组合项具有多个可供您使用的属性（因此无需像您那样创建自定义布局）：

LeadingIcon
尾随图标
形状（圆角）

一个例子看起来像这样：

              Row {
                    TextField(
                        value = text,
                        onValueChange = {  },
                        leadingIcon = Icon(
                            painter = painterResource(id = R.drawable.elogo),
                            contentDescription = "Leading",
                            modifier = Modifier
                                .size(size = 46.dp)
                        ),
                        trailingIcon = Icon(
                            painter = painterResource(id = R.drawable.vector),
                            contentDescription = "Trailing",
                            modifier = Modifier
                                .width(width = 19.dp)
                                .height(height = 19.dp)
                                .alpha(0.5f)),
                        shape = RoundedCornerShape(8.dp)
                    )
                }

您可以在documentation 阅读更多内容。

【讨论】：