Jetpack：006-如何使用输入框

news2024/11/25 20:15:44

文章目录

1. 概念介绍
2. 使用方法
- 2.1 TextField
- 2.2 OutlinedTextField
3. 示例代码
4. 内容总结

我们在上一章回中介绍了Jetpack中文本组件扩展相关的内容，本章回中主要介绍输入框组件。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在本章回中介绍的输入框是指接收文本输入的窗口，最常见的使用场景就是在登录页面中输入用户名和密码。Jetpack compose提供了TextField可组合函数和OutlinedTextField可组合函数来实现输入框，本章回中介绍详细介绍这两个函数的使用方法。

2. 使用方法

2.1 TextField

可组合函数TextField提供了很多参数来控制自己，下面我们将介绍该函数中常用的参数，详细如下：

label参数：用来显示名称，表示输入框的功能；
value参数：输入框中显示的内容，可以填入默认值；
onValueChange参数：它是方法类型，输入内容时回调用此方法；
leadingIcon参数：在输入框最左侧显示的图标；
trailingIcon参数：在输入框最右侧显示的图标；

上面介绍的这些属性中，前三个属性属于必备的内容，后面两个属性属性装饰性的内容，它可以装饰输入框，让输入框显得更加漂亮。

2.2 OutlinedTextField

可组合函数OutlinedTextField和TextField类似，不同之处在于它会在输入框外侧生成一个边框。这两个函数的参数都一样，我们就不详细介绍了，这里只介绍一个参数colors，通过该参数可以修改输入框自带的边框颜色，以及输入框内的背景和文本的颜色，我们将在后面的小节中通过示例代码来演示具体的修改方法。

3. 示例代码

//带下划线的输入框,不过我在外层加了一层边框
TextField(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
        .border(
            width = 2.dp,
            color = Color.Green,
            shape = CircleShape.copy(all = CornerSize(16.dp))
        )
        .clip(shape = CircleShape.copy(all = CornerSize(16.dp)))
        .background(Color.Yellow),
    value = text,
    //默认为false，设置为true时,label和supportText显示为红色
//            isError = true,
    //获取输入的内容
    onValueChange = { text = it },
    placeholder = { Text("pls holder") },
    //开始和结束时的图标
    leadingIcon = { Icon(imageVector = Icons.Default.Person, contentDescription = null)},
    trailingIcon = { Icon(imageVector = Icons.Filled.Notifications, contentDescription = null)},
    //在输入框下方显示的文字
    supportingText = { Text("supporting text ") },
    //在图标后面显示的文字
    label = { Text("Name") },
)

//不带下划线的输入框,不过周围有一圈边框
OutlinedTextField(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    value = text,
    onValueChange = {},
    label = { Text("Name") },
    colors = TextFieldDefaults.outlinedTextFieldColors(
        //修改输入框背景色
        containerColor = Color.Yellow,
        //修改边框颜色
        unfocusedBorderColor = Color.Green,
        focusedBorderColor = Color.Blue,
    ),
)