如何在 Jetpack Compose 中創建自定義 TextField

Question

我想像這樣創建一個 Jetpack Compose TextField：

什么時候不專注：

什么時候對焦：

我怎樣才能創建這個？

Answer 1

使用 OutlinedTextField。 它有一個“標簽”參數，可以放置在文本字段的容器內：

https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary?hl=pt#OutlinedTextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean, kotlin.Boolean,androidx.compose.ui.text.TextStyle,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.text.input.VisualTransformation,androidx.compose. Foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.compose.material。文本字段顏色）

Answer 2

我為此使用了一個解決方案：

@Composable
fun InputTextField(
    labelText: String,
    modifier: Modifier = Modifier,
    dividerColor: Color,
    dividerThickness: Dp = 1.dp,
    spacer: Dp,
    textStyle: TextStyle
) {
    var value by remember { mutableStateOf(TextFieldValue("")) }
    val dividerState = remember {
        mutableStateOf(true)
    }
    BasicTextField(
        value = value,
        onValueChange = { value = it },
        modifier = modifier
            .onFocusChanged {
                dividerState.value = !it.isFocused
            },
        decorationBox = { innerTextField ->
            var mainModifier: Modifier = modifier
            if (!dividerState.value){
                mainModifier = Modifier
                    .fillMaxWidth()
                    .border(
                        width = 1.dp,
                        shape = AppShapes.small,
                        color = AppColor.brandColor.BLUE_DE_FRANCE
                    )
                    .padding(8.dp)
            }

            Column(
                modifier = mainModifier,
                content = {
                    Text(text = labelText, style = textStyle)
                    Spacer(modifier = Modifier.size(spacer))
                    innerTextField()
                    if (dividerState.value) {
                        Divider(
                            thickness = dividerThickness, color = dividerColor,
                            modifier = mainModifier
                        )
                    }
                }
            )
        }
    )
}