如何在 Androidx Compose Material 中删除 TextField 的指示线?
How to remove indicator line of TextField in Androidx Compose Material?
我想删除 TextField 的紫色 line/indicator(见下图)。
这可能吗?我应该创建自己的自定义 TextField 来实现吗?
从 1.2.0-alpha04
开始,您可以使用 TextFieldDecorationBox
和 BasicTextField
来构建基于 [=61= 的自定义文本字段] 设计文本字段。
在您的情况下,您可以应用 indicatorLine
修饰符来定义 focusedIndicatorLineThickness
和 unfocusedIndicatorLineThickness
参数:
var text by remember { mutableStateOf("") }
val singleLine = true
val enabled = true
val interactionSource = remember { MutableInteractionSource() }
BasicTextField(
value = text,
onValueChange = { text = it },
modifier = Modifier
.indicatorLine(enabled, false,
interactionSource,
TextFieldDefaults.textFieldColors(),
focusedIndicatorLineThickness = 0.dp,
unfocusedIndicatorLineThickness = 0.dp
)
.background(
TextFieldDefaults.textFieldColors().backgroundColor(enabled).value,
TextFieldDefaults.TextFieldShape
)
.width(TextFieldDefaults.MinWidth),
singleLine = singleLine,
interactionSource = interactionSource
) { innerTextField ->
TextFieldDecorationBox(
value = text,
innerTextField = innerTextField,
enabled = enabled,
singleLine = singleLine,
visualTransformation = VisualTransformation.None,
interactionSource = interactionSource,
label = { Text("Label") }
)
}
否则你可以使用TextField
定义这些属性:
focusedIndicatorColor
unfocusedIndicatorColor
disabledIndicatorColor
类似于:
TextField(
....
colors = TextFieldDefaults.textFieldColors(
backgroundColor = .....,
focusedIndicatorColor = Transparent,
unfocusedIndicatorColor = Transparent)
)
如果您使用 TextField
,您可以将 activeColor
给 Color.Transparent
注意:activeColor
不仅用于指示器,它用于标签底部指示器和光标
例如:
var text: String by mutableStateOf("")
TextField(value = text, onValueChange = {
text = it
}, activeColor = Color.Transparent)
根据文档,activeColor
是
activeColor the color of the label, bottom indicator and the cursor
when the text field is in focus
如果你想使用自己的可以试试BaseTextField
实际上(alpha 7 版)这是我找到的最简单的删除 Divider 的版本。
将 activeColor
和 inactiveColor
设置为 Color.Transparent
以隐藏 TextField 下的指示线,无论他的状态如何。
如果仅将 inactiveColor
添加到 Color.Transparent
,则只有当 TextField 未获得焦点时,该行才会不可见
添加 textStyle = TextStyle(color = Color.White)
以便在 TextField 是否聚焦时显示颜色。
此解决方案将删除该行,但也会删除光标指示器。目前它不是最好的,但它也是 Compose 上的实际 alpha。
TextField(
value = MyValue,
onValueChange = { },
textStyle = TextStyle(color = Color.White),
activeColor = Color.Transparent,
inactiveColor = Color.Transparent,
shape = RoundedCornerShape(20)
)
这在最近的 Jetpack Compose UI Beta 版本中已更改 1.0.0-beta01 现在您可以通过
TextFieldDefaults 具有所需的颜色。
colors = TextFieldDefaults.textFieldColors(
focusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
backgroundColor = Color.LightGray,
)
例子
TextField(
value = searchText,
onValueChange = { Log.d(HOME_COMPONENT, it) },
label = { Text(text = "Search") },
shape = RoundedCornerShape(10.dp),
leadingIcon = {
Image(
painter = painterResource(id = R.drawable.ic_search),
contentDescription = "search"
)
},
colors = TextFieldDefaults.textFieldColors(
focusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
backgroundColor = Color.LightGray,
)
)
图片:
或者如果您想根据 UI/UX 自定义组件,则使用 BasicTextField
@Composable
fun ToolbarComponent() {
var searchText by remember { mutableStateOf("") }
Row(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically
) {
Icon(
painter = painterResource(id = R.drawable.ic_search),
contentDescription = "search",
modifier = Modifier.size(20.dp),
tint = iconTintColor
)
Spacer(modifier = Modifier.size(16.dp))
BasicTextField(
value = searchText,
onValueChange = { searchText = it },
modifier = Modifier
.background(shape = RoundedCornerShape(10.dp), color = Color.LightGray)
.fillMaxWidth()
.padding(16.dp),
decorationBox = {
Text(text = "Search")
}
)
}
}
我想删除 TextField 的紫色 line/indicator(见下图)。 这可能吗?我应该创建自己的自定义 TextField 来实现吗?
从 1.2.0-alpha04
开始,您可以使用 TextFieldDecorationBox
和 BasicTextField
来构建基于 [=61= 的自定义文本字段] 设计文本字段。
在您的情况下,您可以应用 indicatorLine
修饰符来定义 focusedIndicatorLineThickness
和 unfocusedIndicatorLineThickness
参数:
var text by remember { mutableStateOf("") }
val singleLine = true
val enabled = true
val interactionSource = remember { MutableInteractionSource() }
BasicTextField(
value = text,
onValueChange = { text = it },
modifier = Modifier
.indicatorLine(enabled, false,
interactionSource,
TextFieldDefaults.textFieldColors(),
focusedIndicatorLineThickness = 0.dp,
unfocusedIndicatorLineThickness = 0.dp
)
.background(
TextFieldDefaults.textFieldColors().backgroundColor(enabled).value,
TextFieldDefaults.TextFieldShape
)
.width(TextFieldDefaults.MinWidth),
singleLine = singleLine,
interactionSource = interactionSource
) { innerTextField ->
TextFieldDecorationBox(
value = text,
innerTextField = innerTextField,
enabled = enabled,
singleLine = singleLine,
visualTransformation = VisualTransformation.None,
interactionSource = interactionSource,
label = { Text("Label") }
)
}
否则你可以使用TextField
定义这些属性:
focusedIndicatorColor
unfocusedIndicatorColor
disabledIndicatorColor
类似于:
TextField(
....
colors = TextFieldDefaults.textFieldColors(
backgroundColor = .....,
focusedIndicatorColor = Transparent,
unfocusedIndicatorColor = Transparent)
)
如果您使用 TextField
,您可以将 activeColor
给 Color.Transparent
注意:activeColor
不仅用于指示器,它用于标签底部指示器和光标
例如:
var text: String by mutableStateOf("")
TextField(value = text, onValueChange = {
text = it
}, activeColor = Color.Transparent)
根据文档,activeColor
是
activeColor the color of the label, bottom indicator and the cursor when the text field is in focus
如果你想使用自己的可以试试BaseTextField
实际上(alpha 7 版)这是我找到的最简单的删除 Divider 的版本。
将 activeColor
和 inactiveColor
设置为 Color.Transparent
以隐藏 TextField 下的指示线,无论他的状态如何。
如果仅将 inactiveColor
添加到 Color.Transparent
,则只有当 TextField 未获得焦点时,该行才会不可见
添加 textStyle = TextStyle(color = Color.White)
以便在 TextField 是否聚焦时显示颜色。
此解决方案将删除该行,但也会删除光标指示器。目前它不是最好的,但它也是 Compose 上的实际 alpha。
TextField(
value = MyValue,
onValueChange = { },
textStyle = TextStyle(color = Color.White),
activeColor = Color.Transparent,
inactiveColor = Color.Transparent,
shape = RoundedCornerShape(20)
)
这在最近的 Jetpack Compose UI Beta 版本中已更改 1.0.0-beta01 现在您可以通过
TextFieldDefaults 具有所需的颜色。
colors = TextFieldDefaults.textFieldColors(
focusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
backgroundColor = Color.LightGray,
)
例子
TextField(
value = searchText,
onValueChange = { Log.d(HOME_COMPONENT, it) },
label = { Text(text = "Search") },
shape = RoundedCornerShape(10.dp),
leadingIcon = {
Image(
painter = painterResource(id = R.drawable.ic_search),
contentDescription = "search"
)
},
colors = TextFieldDefaults.textFieldColors(
focusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
backgroundColor = Color.LightGray,
)
)
图片:
或者如果您想根据 UI/UX 自定义组件,则使用 BasicTextField
@Composable
fun ToolbarComponent() {
var searchText by remember { mutableStateOf("") }
Row(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically
) {
Icon(
painter = painterResource(id = R.drawable.ic_search),
contentDescription = "search",
modifier = Modifier.size(20.dp),
tint = iconTintColor
)
Spacer(modifier = Modifier.size(16.dp))
BasicTextField(
value = searchText,
onValueChange = { searchText = it },
modifier = Modifier
.background(shape = RoundedCornerShape(10.dp), color = Color.LightGray)
.fillMaxWidth()
.padding(16.dp),
decorationBox = {
Text(text = "Search")
}
)
}
}