这是 OutlinedTextField 代码在 jetpack-compose 中的样子:
OutlinedTextField(
value = "",
onValueChange = {},
label = {Text("Input")}
)
此 TextField 轮廓的默认颜色是紫色。我想明显地改变轮廓颜色和标签。
OutlinedTextField
使用的默认值由 TextFieldDefaults.outlinedTextFieldColors
、
focusedBorderColor
、unfocusedBorderColor
在 disabledBorderColor
中定义。
与 M2:
focusedBorderColor: Color = MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
unfocusedBorderColor: Color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled),
您可以更改主题中的
colors.primary
和 colors.onSurface
。
与 M3:
focusedBorderColor: Color = OutlinedTextFieldTokens.FocusOutlineColor.toColor(),
unfocusedBorderColor: Color = OutlinedTextFieldTokens.OutlineColor.toColor(),
在这种情况下,您可以更改主题中的
primary
和 outline
颜色。
否则你可以使用以下方法覆盖它们:
OutlinedTextField(
value = "",
onValueChange = {},
label = {Text("Input")},
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = Green,
unfocusedBorderColor = Yellow)
)
@Preview
@Composable
fun TelephoneEditText() {
val textValue = remember {
mutableStateOf("")
}
OutlinedTextField(
label = {
Text(
text = stringResource(
id = R.string.phoneNumber
),
style = TextStyle(
color = MaterialTheme.colors.primaryVariant,
)
)
},
placeholder = {
Text(
text = stringResource(id = R.string.phone_placeholder),
style = TextStyle(
color = MaterialTheme.colors.primaryVariant,
textAlign = TextAlign.Center
)
)
},
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = MaterialTheme.colors.secondary,
unfocusedBorderColor = MaterialTheme.colors.secondary,
focusedLabelColor = MaterialTheme.colors.secondary,
cursorColor = MaterialTheme.colors.primaryVariant
),
keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number),
value = textValue.value,
onValueChange = { textValue.value = it },
)
WhatsAppButton(textValue)
}
颜色.kt
val Yellow500 = Color(0XFFFFDE03)
val Blue700 = Color(0xFF0036FF)
val Pink500 = Color(0xFFf50057)
val Pink700 = Color(0xFFff5983)
val LightColors = lightColors(
primary = Yellow500,
primaryVariant = Blue700,
secondary = Pink500,
secondaryVariant = Pink700
)
val DarkColors = darkColors(
primary = Yellow500,
primaryVariant = Blue700,
secondary = Pink700
)
对于 1.0.0 beta-1
OutlinedTextField(
value = "",
onValueChange = {},
label = {Text("Input")},
color = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor: Color = MaterialTheme.colors.primary.copy(alpha =
ContentAlpha.high),
unfocusedBorderColor: Color = MaterialTheme.colors.onSurface.copy(alpha =
ContentAlpha.disabled),
disabledBorderColor: Color = unfocusedBorderColor.copy(alpha =
ContentAlpha.disabled),
errorBorderColor: Color = MaterialTheme.colors.error,
)
)
使用上述参数根据情况设置边框颜色。
使用撰写 androidx.compose:compose-bom:2023.04.01 现在你需要使用颜色。 对于背景,使用容器颜色,对于边框,使用指示符颜色
OutlinedTextField(
searchValue.value,
{
searchValue.value = it
},
placeholder = { Text(text = stringResource(id = R.string.hint_search_food)) },
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text, imeAction = ImeAction.Search
),
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(24.dp),
colors = TextFieldDefaults.colors(
unfocusedContainerColor = fieldBackGroundColor,
focusedContainerColor = fieldBackGroundColor,
focusedIndicatorColor = fieldBackGroundColor,
unfocusedIndicatorColor = fieldBackGroundColor
),
leadingIcon = {
Icon(Icons.Outlined.Search, "Search")
},
)
我相信这是 M3 的解决方案:
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
cursorColor = androidx.compose.material3.MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = ContentAlpha.medium),
focusedIndicatorColor = androidx.compose.material3.MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = ContentAlpha.medium),
focusedLabelColor = androidx.compose.material3.MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = ContentAlpha.medium)
)
您可以使用此属性来更改边框颜色
OutlinedTextFieldDefaults.colors(
focusedBorderColor = // someColor,
unfocusedBorderColor = //someColor,
)
例如,
OutlinedTextField(
value = status,
onValueChange = { status = it },
shape = RoundedCornerShape(8.dp),
colors = OutlinedTextFieldDefaults.colors(
focusedBorderColor = Grey80,
unfocusedBorderColor = Grey80,
)
)
您有很多选择可供尝试。
在 Compose 1.4.0 和 Material 3 中,您可以使用以下内容:
OutlinedTextField(
value = "Hello",
onValueChange = {},
colors = TextFieldDefaults.outlinedTextFieldColors(
containerColor =,
focusedBorderColor =,
unfocusedBorderColor =
),
)