如何在 Jetpack Compose 中制作此自定义文本搜索字段？

Question

我想要这个搜索栏。

预期：-

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

实现：-

    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))
        }

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

Answer 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
    )
)

Answer 2

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

• 领先图标
• 尾随图标
• 形状（圆角）

一个例子看起来像这样：

              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)
                    )
                }

您可以在文档中阅读更多信息。