Jetpack Compose自定义输入框

在Jetpack Compose里面有一个TextField控件，用来显示一个输入框，但是输入框内部有一个默认的内边距，使得宽高缩小之后，文字被遮挡甚至消失。我尝试了很多方法，都修改不了TextField里面的内边距，后来通过看书终于找到了一个方法，就是使用BasicTextField。

@Composable
fun SearchField(modifier: Modifier = Modifier) {
    var text by remember { mutableStateOf("") }
    var iconColor by remember { mutableStateOf(White2) }
    var textColor by remember { mutableStateOf(White2) }

    BasicTextField(
        modifier = modifier.clickable {
            textColor= White1
            iconColor= White1
        },
        value = text,
        onValueChange = { text = it },
        decorationBox = {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier
                    .background(Blue3, Small)
                    .padding(horizontal = 5.dp)

            ) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_sousuokuang),
                    contentDescription = null,
                    tint = White2
                )
                Box(
                    contentAlignment = Alignment.CenterStart,
                    modifier = Modifier.padding(start = 5.dp)
                ) {
                    if (text.isEmpty()) {
                        Text(text = "全网搜索",color=textColor)
                    }
                    it()
                }
            }
        }
    )
}

BasicTextField是一个底层的输入框控件，可以自定义输入框的显示方式，其中关键在于decorationBox 参数，可以定制输入框里面的文字和图标如何显示。代码当中还调用了Text控件，通过判断文本是否为空来显示placeholder。