Android Jetpack Compose如何修改OutlinedTextField的边框宽度？

OutlinedTextField本身支持通过border参数自定义边框样式，无需额外重写组件逻辑，即可同时实现调整边框宽度、自定义各状态边框颜色的需求，具体实现如下：

实现代码 #

Material3版本 #

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

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),
     border = TextFieldDefaults.outlinedTextFieldBorder(
         // 自定义边框宽度，可分别设置聚焦/非聚焦状态的宽度
         focusedBorderThickness = 2.dp,
         unfocusedBorderThickness = 2.dp,
         // 自定义各状态下的边框颜色
         focusedBorderColor = Color.Blue,
         unfocusedBorderColor = Color.Gray,
         disabledBorderColor = Color.LightGray
     )
)

Material2版本 #

如果使用的是Material2组件库，仅需修改TextFieldDefaults的包名即可，参数用法完全一致：

import androidx.compose.material.TextFieldDefaults

注意事项 #

• 可根据需求直接修改focusedBorderThickness、unfocusedBorderThickness的数值调整边框宽度，两个参数设为相同值即可实现所有状态下边框宽度一致
• focusedBorderColor、disabledBorderColor、unfocusedBorderColor三个参数可自由设置对应状态的边框颜色，不会出现失效问题
• 如果需要设置渐变边框，可将对应颜色参数替换为Brush类型的渐变实例即可

内容的提问来源于stack exchange，提问作者Alex Kamanin