自定義文本字段 jetpack 撰寫，我不知道如何處理文本字段

Question

我試着設計這個

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

Answer 1

由於您需要一個不遵循 Material Design 的自定義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)
            )
        }
    }
}

這是結果：