英文:
Change OutlinedTextField border thickness in jetpack compose
问题
我在我的Jetpack Compose项目中有一个自定义的OutlinedTextField,并且我遇到了默认边框厚度的问题。默认边框似乎非常细,我想要改变它的厚度。然而,我找不到任何直接的属性或值来调整边框的厚度。
英文:
I have a custom OutlinedTextField in my Jetpack Compose project, and I'm facing an issue with the default border thickness. The default border appears to be very thin, and I want to change its thickness. However, I couldn't find any direct property or value to adjust the border thickness.
@Composable
fun CustomTextField(
modifier: Modifier = Modifier,
readOnly: Boolean = false,
value: String?,
onValueChange: (String) -> Unit,
maxLength: Int = 50,
isValid: ((String) -> Boolean)? = null,
label: String? = null,
keyboardType: KeyboardType = KeyboardType.Text,
imeAction: ImeAction = ImeAction.Done,
maxLines: Int = 1,
trailingIcon: @Composable (() -> Unit)? = null,
shape: Shape = MaterialTheme.shapes.extraLarge,
labelColor: Color? = null,
containerColor: Color = MaterialTheme.colorScheme.primary.copy(0.1f),
focusedBorderColor: Color = MaterialTheme.colorScheme.primary,
unfocusedBorderColor: Color = MaterialTheme.colorScheme.primary.copy(0.75f),
placeholder: String? = null
) {
OutlinedTextField(
readOnly = readOnly,
value = value ?: "",
onValueChange = { text ->
if (text.length <= maxLength) {
onValueChange(text)
}
},
textStyle = MaterialTheme.typography.bodyMedium,
label = {
label?.let {
CustomText(
text = label,
style = MaterialTheme.typography.labelMedium,
color = labelColor,
fontSize = 12.sp,
fontWeight = FontWeight.Bold
)
}
},
placeholder = {
placeholder?.let {
CustomText(
text = placeholder,
style = MaterialTheme.typography.bodyMedium.copy(color = Color.Gray),
color = Color.Gray
)
}
},
singleLine = maxLines == 1,
maxLines = maxLines,
colors = TextFieldDefaults.outlinedTextFieldColors(
containerColor = containerColor,
focusedBorderColor = focusedBorderColor,
unfocusedBorderColor = unfocusedBorderColor,
),
trailingIcon = trailingIcon
)
}
答案1
得分: 3
使用M3,您可以使用BasicTextField
+ OutlinedTextFieldDefaults.DecorationBox
。
对于container
参数,您可以使用OutlinedTextFieldDefaults.ContainerBox
创建自定义容器,它允许您自定义**focusedBorderThickness
和unfocusedBorderThickness
**的值:
BasicTextField(
value = value,
onValueChange = { value = it },
interactionSource = interactionSource,
enabled = true,
singleLine = singleLine,
) {
OutlinedTextFieldDefaults.DecorationBox(
value = value,
innerTextField = it,
singleLine = singleLine,
enabled = true,
label = { Text("标签") },
placeholder = { Text("占位符") },
visualTransformation = VisualTransformation.None,
interactionSource = interactionSource,
colors = OutlinedTextFieldDefaults.colors(),
container = {
OutlinedTextFieldDefaults.ContainerBox(
enabled,
isError,
interactionSource,
colors,
shape,
focusedBorderThickness = 4.dp,
unfocusedBorderThickness = 4.dp
)
}
)
}
英文:
With M3, you can use a BasicTextField
+ OutlinedTextFieldDefaults.DecorationBox
.
For the container
parameter, you can create a custom container using OutlinedTextFieldDefaults.ContainerBox
, which allows you to customize the focusedBorderThickness
and the unfocusedBorderThickness
values:
BasicTextField(
value = value,
onValueChange = { value = it },
interactionSource = interactionSource,
enabled = true,
singleLine = singleLine,
) {
OutlinedTextFieldDefaults.DecorationBox(
value = value,
innerTextField = it,
singleLine = singleLine,
enabled = true,
label = { Text("Label") },
placeholder = { Text("Placeholder") },
visualTransformation = VisualTransformation.None,
interactionSource = interactionSource,
colors = OutlinedTextFieldDefaults.colors(),
container = {
OutlinedTextFieldDefaults.ContainerBox(
enabled,
isError,
interactionSource,
colors,
shape,
focusedBorderThickness = 4.dp,
unfocusedBorderThickness = 4.dp
)
}
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论