Jetpack Compose：自定义 TextField 设计

Question

一般来说，Jetpack Compose 中的大多数组件似乎都非常容易定制。

但是，对于TextField则不能这样说。 例如，假设我想做这样的事情：

有人会认为简单地包装BaseTextField就可以了。 但是， BaseTextField组件中似乎出现了一个错误，我已经打开了一个问题。 这个错误将不允许用户在焦点离开文本字段后再次聚焦文本字段，直到组件被重新渲染。

引用此，我尝试自定义OutlinedTextField和TextField组件，但无法将它们自定义为如上图所示。 如果不是因为 cursor 颜色使用activeColor属性，我可以让它工作。

创建一个类似于上面的可用文本字段的正确解决方法是什么？

Answer 1

使用1.0.0-beta06您可以使用以下内容：

TextField(
    value = text,
    onValueChange = { /*...*/},
    label = { Text("") },
    shape = RoundedCornerShape(8.dp),
    trailingIcon = { Icon(Icons.Filled.Add, "") },
    colors = TextFieldDefaults.textFieldColors(
           backgroundColor = ....,
           focusedIndicatorColor =  Color.Transparent, 
           unfocusedIndicatorColor = .....)
)

Answer 2

那么，在我提到的问题解决之前，选择是：

1. 回滚到 Compose 版本1.0.0-alpha04 （问题已在alpha05中引入）
2. 为TextField或OutlinedTextField添加边框，如下所示：

    TextField( value = myValue, onValueChange = myOnChange, modifier = Modifier.clip(myShape).border(5.dp, myColor) )

Answer 3

除了Gabriele Mariotti 的回答
如果您想为您的 cursor 自定义颜色，您可以使用以下方法实现：

Column(){
    //External label
    Text(
        ...
        ...
    )

    TextField(
        ...
        ...

        colors = TextFieldDefaults.textFieldColors(
            backgroundColor = ...,
            focusedIndicatorColor =  ..., 
            unfocusedIndicatorColor = ...,
            cursorColor = Color.Black)
    )
    //counter message
    Text(
        ...
        ...
    )

Answer 4

通过这个例子，你可以学到很多东西。 使用 1.0.0 你可以这样做：

自定义 TextField 打印屏幕在这里

Column {
        var textState by remember { mutableStateOf("") }
        val maxLength = 110
        val lightBlue = Color(0xffd8e6ff)
        val blue = Color(0xff76a9ff)
        Text(
            text = "Caption",
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 4.dp),
            textAlign = TextAlign.Start,
            color = blue
        )
        TextField(
            modifier = Modifier.fillMaxWidth(),
            value = textState,
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = lightBlue,
                cursorColor = Color.Black,
                disabledLabelColor = lightBlue,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent
            ),
            onValueChange = {
                if (it.length <= maxLength) textState = it
            },
            shape = RoundedCornerShape(8.dp),
            singleLine = true,
            trailingIcon = {
                if (textState.isNotEmpty()) {
                    IconButton(onClick = { textState = "" }) {
                        Icon(
                            imageVector = Icons.Outlined.Close,
                            contentDescription = null
                        )
                    }
                }
            }
        )
        Text(
            text = "${textState.length} / $maxLength",
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 4.dp),
            textAlign = TextAlign.End,
            color = blue
        )
    }