Android Compose边框样式输入框

wk灬丨

已于 2022-09-04 00:36:54 修改

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Compose 文章标签： android kotlin

于 2022-09-03 00:15:28 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47592544/article/details/126672360

Compose 专栏收录该内容

8 篇文章

订阅专栏

这篇博客展示了如何在Android Compose中创建一个带有自定义边框颜色和Label颜色的OutlineTextField。在点击前，输入框显示为普通状态；点击后，边框变为深灰色，Label变为蓝色，并伴有动画效果。该组件可用于用户输入，如用户名等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(Modifier.fillMaxSize()) {
                outLinedEditText()
            }
        }
    }
}

@Composable
fun outLinedEditText() {
    var text by remember { mutableStateOf("") }
    OutlinedTextField(value = text, onValueChange = { text = it }, label = { Text("用户名") },
        leadingIcon = {
            Icon(imageVector = Icons.Filled.AccountBox, contentDescription = "")
        },
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = Color.DarkGray,   // 边框颜色
            focusedLabelColor = Color.Blue         // Label颜色
        ),
        modifier = Modifier.padding(50.dp)
    )
}

运行效果图：

点击前：