如何更改 Android Jetpack Compose 中的 OutlineTextField 邊框寬度？

Question

我的代碼：

OutlinedTextField(
     value = state.value,
     onValueChange = { state.value = it },
     modifier = Modifier.fillMaxWidth().padding(start = 30.dp, end = 30.dp),
     label = { Text(text = "Something", fontSize = 14.sp) },
     shape = RoundedCornerShape(12.dp),
)

我想增加邊框寬度，以便支持 colors focusedBorderColor和disabledBorderColor 。

Answer 1

您可以像這樣更改 OutlinedTextField 邊框

    var hasFocus by remember { mutableStateOf(false) }

    OutlinedTextField(
        modifier = modifier
            .border(
                width = 1.dp,
                color = if (hasFocus) Color.Red else Color.Unspecified
            )
            .onFocusChanged { focusState -> hasFocus = focusState.hasFocus },
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = Color.Unspecified,
            unfocusedBorderColor = Color.Unspecified
        )
    )

另一種解決方案是使用BaseTextField而不是OutlinedTextField

Answer 2

輪廓邊框在OutlinedTextField定義為常量值。

private val IndicatorUnfocusedWidth = 1.dp
private val IndicatorFocusedWidth = 2.dp

沒有直接的方法來覆蓋這些值。

因此，如果您需要實現動態邊框寬度，則必須創建完整的自定義 TextField Composable。

您可以復制粘貼OutlinedTextField.kt和TextFieldImpl.kt的完整代碼，並根據需要修改它們以創建自定義可組合。