Jetpack：006-如何使用输入框

我们在上一章回中介绍了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,
    ),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

我们在上面的代码中演示了两种可组合函数的代码，并且在关键位置添加了注释，下面是程序的运行效果图，请大家参考：

4. 内容总结

最后，我们对本章回中的内容做一个总结：

• 输入框可以通过可组合函数TextField和OutlinedTextField实现；
• 两个可组合函数的参数相同，不同之处在于输入框的样式：周围是否有边框；
• lable参数用来表明输入框的功能，value参数用来存放输入框中显示的内容；
• onValueChang参数在输入内容时回调，通常使用它来获取输入框中输入的内容；
• 其它的参数都是用来装饰输入框的，比如边框的颜色，提示内容，边框中的图标等；

看官们，关于Jetpack中输入框组件相关的内容就介绍到这里，欢迎大家在评论区交流与讨论！