kotlin 我怎样才能在jetpack compose中创建这个自定义文本搜索字段?

2j4z5cfb  于 2023-02-24  发布在  Kotlin
关注(0)|答案(3)|浏览(98)

我要这个搜索栏。
预期值:-x1c 0d1x
我尝试了下面的代码,但它不是预期的工作.
已实现:-

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

我需要在两端的两个标志沿着圆形角落。

ovfsdjhp

ovfsdjhp1#

你可以这样做,首先创建自定义搜索视图

@Composable
    fun CustomSearchView(
        search: String,
        modifier: Modifier = Modifier,
        onValueChange: (String) -> Unit
    ) {
    
        Box(
            modifier = modifier
                .padding(20.dp)
                .clip(CircleShape)
                .background(Color(0XFF101921))
    
        ) {
            TextField(value = search,
                onValueChange = { onValueChange(it) },
                colors = TextFieldDefaults.textFieldColors(
                    backgroundColor = Color(0XFF101921),
                    placeholderColor = Color(0XFF888D91),
                    leadingIconColor = Color(0XFF888D91),
                    trailingIconColor = Color(0XFF888D91),
                    textColor = Color.White,
                    focusedIndicatorColor = Color.Transparent, cursorColor = Color(0XFF070E14)
                ),
                leadingIcon = { Icon(imageVector = Icons.Default.Search, contentDescription = "") },
                trailingIcon = { Icon(imageVector = Icons.Default.Search, contentDescription = "") },
                placeholder = { Text(text = "Search") }
            )
        }
    
    }

现在你可以像这样用在任何地方...

@Composable
fun Demo() {
    var search by remember { mutableStateOf("") }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0XFF070E14))
    ) {
        CustomSearchView(search = search, onValueChange = {
            search = it
        })
    }

}

结果

ef1yzkbh

ef1yzkbh2#

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

eimct9ow3#

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

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

相关问题