自定义文本字段 jetpack 撰写，我不知道如何处理文本字段

Question

我试着设计这个

但我不知道如何在 jetpack compose 中使用 Textfield

Answer 1

由于您需要一个不遵循 Material 设计的自定义 TextField，您应该使用 BasicTextField 并根据需要自定义它（您需要检查参数那个）。

这只是您实施的起点...

@Composable
fun CustomTextField() {
    var text by remember {
        mutableStateOf("")
    }
    Card(Modifier.fillMaxWidth()) {
        Row(
            Modifier
                .height(IntrinsicSize.Min)
        ) {
            Icon(
                imageVector = Icons.Default.Search,
                contentDescription = null,
                modifier = Modifier.padding(8.dp)
            )
            BasicTextField(
                value = text,
                onValueChange = { text = it },
                Modifier
                    .weight(1f)
                    .padding(8.dp)
            )
            Box(
                Modifier
                    .padding(vertical = 2.dp)
                    .width(1.dp)
                    .fillMaxHeight()
                    .background(MaterialTheme.colors.onBackground.copy(alpha = .5f))
            )
            Icon(
                imageVector = Icons.Default.Settings,
                contentDescription = null,
                modifier = Modifier.padding(8.dp)
            )
        }
    }
}

结果如下：