Jetpack Compose TextField详解

Bug小明
11,016 阅读8分钟

TextField是Compose里的文本输入控件，类似于原来的EditText。下面我们来详细的讲解他的每个属性的含义。

一：TextField的属性讲解

先来看看TextField的源码

@Composable
fun TextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: @Composable (() -> Unit)? = null,
    placeholder: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions(),
    singleLine: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape =
        MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize),
    colors: TextFieldColors = TextFieldDefaults.textFieldColors()
){
    ...
}
  • value 是文本框里的文本内容
  • onValueChange 文本框输入内容时候的回调，有个string参数值刚好是文本框输入的内容。类似以前EditTextd的onTextChangeListener 
    @Preview()
@Composable
fun textFeildTest(){
  var phone = remember {
      mutableStateOf("")
  }
  Column() {
      TextField(
              value = phone.value,
              onValueChange = { phone.value = it }
      )
  }
}
  • modifier 修饰符 我们在前面的文章讲过 Modifier用法详解
  • enabled 是否可用
  • readOnly 是否只读 (只读的话是不能输入内容的，获取焦点的时候不会去弹软键盘输入) 
    @Preview()
@Composable
fun textFeildTest(){
  var phone = remember {
      mutableStateOf("")
  }
  Column() {
      TextField(
              value = phone.value,
              onValueChange = { phone.value = it },
              enable=true,
              readOnly = true
      )
  }
}
  • textStyle 是文本样式的设置 我们前面文章讲Text控件的时候讲过 Text文本控件讲解
  • label 文本框还未输入内容，并且没有获取焦点时候显示的文字，文本框输入文字之后或者获取焦点之后，该label会移动到输入的文本的上面。如果是OutlinedTextField控件的话，那么效果不太一样，OutlinedTextField的label在输入文本的时候会移动到背景框上。 
    @Preview()
@Composable
fun textFeildTest(){
  var phone = remember {
      mutableStateOf("")
  }
  var password = remember {
      mutableStateOf("")
  }
  Column() {
      TextField(
              value = phone.value,
              onValueChange = { phone.value = it },
              label = { Text("手机号码") }
      )
      OutlinedTextField(value = password.value, onValueChange = { password.value = it
      },label = { Text("密码")})
  }
}
  • placeholder 有点hint的感觉。就是在没有输入内容的时候，当获取到焦点的时候，会显示该placeholder里定义的控件。placeholder里我们可以定义文本或者其他控件都可以 
    @Preview()
@Composable
fun textFeildTest(){
  var phone = remember {
      mutableStateOf("")
  }
  var password = remember {
      mutableStateOf("")
  }
  Column() {
      TextField(
              value = phone.value,
              onValueChange = { phone.value = it },
              label = { Text("手机号码") },
              placeholder = {
                  Text("请输入手机号码")
              }
      )
      OutlinedTextField(value = password.value, onValueChange = { password.value = it
      },label = { Text("密码")})
  }
}
  • leadingIcon是显示在文本框左边的控件。比如我们经常输入框里前添加个手机的小图标。表示该文本框可以输入手机号码 
    @Preview()
@Composable
fun textFeildTest(){
  var phone = remember {
      mutableStateOf("")
  }
  var password = remember {
      mutableStateOf("")
  }
  Column() {
      TextField(
              value = phone.value,
              onValueChange = { phone.value = it },
              label = { Text("手机号码") },
              placeholder = {
                  Text("请输入手机号码")
              },
              leadingIcon = {
                  // 左边的图片
                  Image(painterResource(id = R.drawable.new_tata_icon_buzz,contentDescription = "输入框前面的图标"))
              }
      )
      OutlinedTextField(value = password.value, onValueChange = { password.value = it
      },label = { Text("密码")})
  }
}
  • trailingIcon是显示在文本框末尾的控件。比如我们经常有个打叉图片显示在末尾。可以clear文本 
    @Preview()
@Composable
fun textFeildTest(){
 var phone = remember {
     mutableStateOf("")
 }
 var password = remember {
     mutableStateOf("")
 }
 Column() {
     TextField(
             value = phone.value,
             onValueChange = { phone.value = it },
             label = { Text("手机号码") },
             placeholder = {
                 Text("请输入手机号码")
             },
             leadingIcon = {
                 // 左边的图片
                 Image(painterResource(id = R.drawable.new_tata_icon_buzz),contentDescription = "输入框前面的图标")
             },
             trailingIcon={
                 Image(painterResource(id = R.drawable.apk_ic_ad_gift),contentDescription = "输入框后面的图标")
             }
     )
     OutlinedTextField(value = password.value, onValueChange = { password.value = it
     },label = { Text("密码")})
 }
}
  • isErrorValue 表示是否是error类型的。如果设置成true的话，那么输入框的背景会变成红色 
    @Preview()
@Composable
fun textFeildTest(){
  var phone = remember {
      mutableStateOf("")
  }
  var password = remember {
      mutableStateOf("")
  }
  Column() {
      TextField(
              value = phone.value,
              onValueChange = { phone.value = it },
              label = { Text("手机号码") },
              placeholder = {
                  Text("请输入手机号码")
              },
              leadingIcon = {
                  // 左边的图片
                  Image(painterResource(id = R.drawable.new_tata_icon_buzz),contentDescription = "输入框前面的图标"))
              },
              trailingIcon={
                  Image(painterResource(id = R.drawable.apk_ic_ad_gift),contentDescription = "输入框后面的图标"))
              },
              isErrorValue = true
      )
      OutlinedTextField(value = password.value, onValueChange = { password.value = it
      },label = { Text("密码")})
  }
}
  • visualTransformation : VisualTransformation有个实现类是 PasswordVisualTransformation,PasswordVisualTransformation有个参数是字符，可以去设置输入的文本样式，比如密码的时候输入变成*号 。(PasswordVisualTransformation不传字符的话默认是点.) 
    @Preview()
@Composable
fun textFeildTest(){
  var phone = remember {
      mutableStateOf("")
  }
  var password = remember {
      mutableStateOf("")
  }
  Column() {
      TextField(
              value = phone.value,
              onValueChange = { phone.value = it },
              label = { Text("手机号码") },
              placeholder = {
                  Text("请输入手机号码")
              },
              leadingIcon = {
                  // 左边的图片
                  Image(painterResource(id = R.drawable.new_tata_icon_buzz),contentDescription = "输入框前面的图标"))
              },
              trailingIcon={
                  Image(painterResource(id = R.drawable.apk_ic_ad_gift),contentDescription = "输入框前面的图标"))
              },
              isErrorValue = true
      )
      OutlinedTextField(
      value = password.value, 
      onValueChange = { password.value = it },
      label = { Text("密码")},
      // 设置输入的文本样式，比如密码的时候输入变成....
      visualTransformation = PasswordVisualTransformation('*'))
  }
}
  • keyboardOptions 设置键盘的。我们具体来看下KeyboardOptions的源码 
    @Immutable
data class KeyboardOptions constructor(
  val capitalization: KeyboardCapitalization = KeyboardCapitalization.None,
  val autoCorrect: Boolean = true,
  val keyboardType: KeyboardType = KeyboardType.Text,
  val imeAction: ImeAction = ImeAction.Unspecified
) {
 ...
}
    • capitalization 这个属性有4个值，分别表示如下
      KeyboardCapitalization.Sentences 当输入英文时候，将每个字母的第一个字符大写
      KeyboardCapitalization.Words 当输入英文的时候，将每个字母的第一个字符小写
      KeyboardCapitalization.None 不自动大小写
      KeyboardCapitalization.Characters将所有的字符大写
    • autoCorrect // 自动更正的意思，默认值是true就行。
    • keyboardType 表示输入的文本的类型，比如文字啊，文本等。类型之前的EditText的inputType属性。有如下几种情况的值。
      KeyboardType.Text 是输入文本
      KeyboardType.Ascii 是输入ASCII字符
      KeyboardType.Number 输入数字
      KeyboardType.Phone 电话
      KeyboardType.Uri uri
      KeyboardType.Email 邮件
      KeyboardType.Password 密码
      KeyboardType.NumberPassword 数字密码
    • imeAction 表示软键盘右下角按钮的类型。比如下一步啊，搜索，完成等,跟之前的EditText设置类似 有如下几种属性值
      ImeAction.Unspecified
      ImeAction.NoAction
      ImeAction.Go
      ImeAction.Search
      ImeAction.Send
      ImeAction.Previous
      ImeAction.Next
      ImeAction.Done 讲完keyboardOptions属性对应的几个入参的意思。现在我们来举个keyboardOptions的例子
    @Preview()
@Composable
fun textFeildTest(){
  var phone = remember {
      mutableStateOf("")
  }
  var password = remember {
      mutableStateOf("")
  }
  
  Column() {
      TextField(
              value = phone.value,
              onValueChange = { phone.value = it },
              label = { Text("手机号码") },
              placeholder = {
                  Text("请输入手机号码")
              },
              leadingIcon = {
                  // 左边的图片
                  Image(painterResource(id = R.drawable.new_tata_icon_buzz),contentDescription = "输入框前面的图标"))
              },
              trailingIcon={
                  Image(painterResource(id = R.drawable.apk_ic_ad_gift),contentDescription = "输入框前面的图标"))
              },
              isErrorValue = false,
              keyboardOptions = KeyboardOptions(keyboardType=KeyboardType.Text,imeAction = ImeAction.Next,autoCorrect=true,capitalization= KeyboardCapitalization.Sentences)
    
      )
      OutlinedTextField(
      value = password.value, 
      onValueChange = { password.value = it },
      label = { Text("密码")},
      // 设置输入的文本样式，比如密码的时候输入变成....
      visualTransformation = PasswordVisualTransformation('*'))
  }
}
  • singleLine设置单行
  • maxLines 设置最大行数
  • keyboardActions 该属性是可以监听软键盘点击了哪个ImeAction。KeyboardActions有如下几种行为可以监听。onDone，onGo，onNext，onPrevious，onSearch，onSend 
    @Preview()
@Composable
fun textFeildTest(){
  var phone = remember {
      mutableStateOf("")
  }
  var password = remember {
      mutableStateOf("")
  }
  
  Column() {
      TextField(
              value = phone.value,
              onValueChange = { phone.value = it },
              label = { Text("手机号码") },
              placeholder = {
                  Text("请输入手机号码")
              },
              leadingIcon = {
                  // 左边的图片
                  Image(painterResource(id = R.drawable.new_tata_icon_buzz),contentDescription = "输入框前面的图标"))
              },
              trailingIcon={
                  Image(painterResource(id = R.drawable.apk_ic_ad_gift),contentDescription = "输入框前面的图标"))
              },
              isErrorValue = false,
              keyboardOptions = KeyboardOptions(keyboardType=KeyboardType.Text,imeAction = ImeAction.Next,autoCorrect=true,capitalization= KeyboardCapitalization.Sentences),
              keyboardActions = KeyboardActions(
              onDone = {

              },
              onGo={

              },
              onNext = {

              },
              onPrevious ={

              },
              onSearch = {

              },
              onSend = {

              }
          )
    
      )
      OutlinedTextField(
      value = password.value, 
      onValueChange = { password.value = it },
      label = { Text("密码")},
      // 设置输入的文本样式，比如密码的时候输入变成....
      visualTransformation = PasswordVisualTransformation('*'))
  }
}
  • interactionSource 可以处理状态的，比如按下的时候什么效果，正常时候什么效果。类似之前再布局文件里写Selector。 比如我们下面的例子中设置，如果是选中时候边框线的颜色是绿色，没有选中时候是黑色。 interactionSource.collectIsPressedAsState() 判断是否按下状态interactionSource.collectIsFocusedAsState() 判断是否获取焦点的状态interactionSource.collectIsDraggedAsState() 判断是否拖动 比如我们这里简单按下时候，lable的文本改成”手机号“，不按下的时候显示”手机号码“ 
    @Preview()
@Composable
fun textFeildTest(){
  var phone = remember {
      mutableStateOf("")
  }
  var password = remember {
      mutableStateOf("")
  }
  val interactionSource = remember {
      MutableInteractionSource()
  }
  val pressState = interactionSource.collectIsPressedAsState()
  val lableText = if (pressState.value) "手机号" else "手机号码"
  
  Column() {
      TextField(
              value = phone.value,
              onValueChange = { phone.value = it },
              label = { Text(lableText) },
              placeholder = {
                  Text("请输入手机号码")
              },
              leadingIcon = {
                  // 左边的图片
                  Image(painterResource(id = R.drawable.new_tata_icon_buzz),contentDescription = "输入框前面的图标"))
              },
              trailingIcon={
                  Image(painterResource(id = R.drawable.apk_ic_ad_gift),contentDescription = "输入框前面的图标"))
              },
              isErrorValue = false,
              keyboardOptions = KeyboardOptions(keyboardType=KeyboardType.Text,imeAction = ImeAction.Next,autoCorrect=true,capitalization= KeyboardCapitalization.Sentences),
              keyboardActions = KeyboardActions(
              onDone = {

              },
              onGo={

              },
              onNext = {

              },
              onPrevious ={

              },
              onSearch = {

              },
              onSend = {

              }),
              interactionSource = interactionSource,
              // singleLine 设置单行
              singleLine=true,
              // maxLines设置最大行数
              maxLines = 2
      )
      OutlinedTextField(
      value = password.value, 
      onValueChange = { password.value = it },
      label = { Text("密码")},
      // 设置输入的文本样式，比如密码的时候输入变成....
      visualTransformation = PasswordVisualTransformation('*'))
  }
}
  • shape 设置背景的形状。比如圆角，圆形等 
    @Preview()
@Composable
fun textFeildTest(){
  var phone = remember {
      mutableStateOf("")
  }
  var password = remember {
      mutableStateOf("")
  }
  val interactionSource = remember {
      MutableInteractionSource()
  }
  val pressState = interactionSource.collectIsPressedAsState()
  val lableText = if (pressState.value) "手机号" else "手机号码"
  
  Column() {
      TextField(
              value = phone.value,
              onValueChange = { phone.value = it },
              label = { Text(lableText) },
              placeholder = {
                  Text("请输入手机号码")
              },
              leadingIcon = {
                  // 左边的图片
                  Image(painterResource(id = R.drawable.new_tata_icon_buzz),contentDescription = "输入框前面的图标"))
              },
              trailingIcon={
                  Image(painterResource(id = R.drawable.apk_ic_ad_gift),contentDescription = "输入框后面的图标"))
              },
              isErrorValue = false,
              keyboardOptions = KeyboardOptions(keyboardType=KeyboardType.Text,imeAction = ImeAction.Next,autoCorrect=true,capitalization= KeyboardCapitalization.Sentences),
              keyboardActions = KeyboardActions(
              onDone = {

              },
              onGo={

              },
              onNext = {

              },
              onPrevious ={

              },
              onSearch = {

              },
              onSend = {

              }),
              interactionSource = interactionSource,
              // singleLine 设置单行
              singleLine = true,
              // maxLines设置最大行数
              maxLines = 2,
              // 设置背景的形状。比如圆角，圆形等
              shape= RoundedCornerShape(4f)
      )
      OutlinedTextField(
      value = password.value, 
      onValueChange = { password.value = it },
      label = { Text("密码")},
      // 设置输入的文本样式，比如密码的时候输入变成....
      visualTransformation = PasswordVisualTransformation('*'))
  }
}
  • colors 设置各种颜色 是通过TextFieldDefaults.textFieldColors()去设置。TextFieldDefaults.textFieldColors()的代码如下： 
    @Composable
  fun textFieldColors(
      textColor: Color = LocalContentColor.current.copy(LocalContentAlpha.current),
      disabledTextColor: Color = textColor.copy(ContentAlpha.disabled),
      backgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = BackgroundOpacity),
      cursorColor: Color = MaterialTheme.colors.primary,
      errorCursorColor: Color = MaterialTheme.colors.error,
      focusedIndicatorColor: Color =
          MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
      unfocusedIndicatorColor: Color =
          MaterialTheme.colors.onSurface.copy(alpha = UnfocusedIndicatorLineOpacity),
      disabledIndicatorColor: Color = unfocusedIndicatorColor.copy(alpha = ContentAlpha.disabled),
      errorIndicatorColor: Color = MaterialTheme.colors.error,
      leadingIconColor: Color =
          MaterialTheme.colors.onSurface.copy(alpha = IconOpacity),
      disabledLeadingIconColor: Color = leadingIconColor.copy(alpha = ContentAlpha.disabled),
      errorLeadingIconColor: Color = leadingIconColor,
      trailingIconColor: Color =
          MaterialTheme.colors.onSurface.copy(alpha = IconOpacity),
      disabledTrailingIconColor: Color = trailingIconColor.copy(alpha = ContentAlpha.disabled),
      errorTrailingIconColor: Color = MaterialTheme.colors.error,
      focusedLabelColor: Color =
          MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
      unfocusedLabelColor: Color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium),
      disabledLabelColor: Color = unfocusedLabelColor.copy(ContentAlpha.disabled),
      errorLabelColor: Color = MaterialTheme.colors.error,
      placeholderColor: Color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium),
      disabledPlaceholderColor: Color = placeholderColor.copy(ContentAlpha.disabled)
  ){
      ...
  }
    • textColor 输入的文字的颜色
    • disabledTextColor 不可用时的文字颜色
    • backgroundColor 背景颜色
    • cursorColor 光标颜色
    • errorCursorColor isError等于true时候的光标的颜色
    • focusedIndicatorColor 获取焦点时候的框的颜色 (输入框TextField下面有一条横线，那条横线的颜色)
    • unfocusedIndicatorColor 没有获取焦点时候的框的颜色
    • disabledIndicatorColor 不可用时候的框的颜色
    • errorIndicatorColor isError等于true时候的框的颜色
    • leadingIconColor 输入框前面图标控件的颜色
    • disabledLeadingIconColor 不可用状态时输入框前面图标控件的颜色
    • errorLeadingIconColor isError等于true时候，输入框前面图标控件的颜色
    • trailingIconColor 输入框后面图标的颜色
    • disabledTrailingIconColor 不可用状态时输入框后面图标控件的颜色
    • errorTrailingIconColor isError等于true时，输入框后面的颜色
    • focusedLabelColor 获取焦点时label的颜色
    • unfocusedLabelColor 没有获取焦点时label的颜色
    • disabledLabelColor 不可用状态时，label的颜色
    • errorLabelColor isError时label的颜色
    • placeholderColor placeholder属性设置的控件的颜色
    • disabledPlaceholderColor 不可用时placeholder属性设置的控件的颜色
  @Preview()
  @Composable
  fun textFeildTest(){
    var phone = remember {
        mutableStateOf("")
    }
    var password = remember {
        mutableStateOf("")
    }
    val interactionSource = remember {
        MutableInteractionSource()
    }
    val pressState = interactionSource.collectIsPressedAsState()
    val lableText = if (pressState.value) "手机号" else "手机号码"
    
    Column() {
        TextField(
                value = phone.value,
                onValueChange = { phone.value = it },
                label = { Text(lableText) },
                placeholder = {
                    Text("请输入手机号码")
                },
                leadingIcon = {
                    // 左边的图片
                    Image(painterResource(id = R.drawable.new_tata_icon_buzz),contentDescription = "输入框前面的图标"))
                },
                trailingIcon={
                    Image(painterResource(id = R.drawable.apk_ic_ad_gift),contentDescription = "输入框后面的图标"))
                },
                isErrorValue = false,
                keyboardOptions = KeyboardOptions(keyboardType=KeyboardType.Text,imeAction = ImeAction.Next,autoCorrect=true,capitalization= KeyboardCapitalization.Sentences),
                keyboardActions = KeyboardActions(
                onDone = {

                },
                onGo={

                },
                onNext = {

                },
                onPrevious ={

                },
                onSearch = {

                },
                onSend = {

                }),
                interactionSource = interactionSource,
                // singleLine 设置单行
                singleLine = true,
                // maxLines设置最大行数
                maxLines = 2,
                // 设置背景的形状。比如圆角，圆形等
                shape= RoundedCornerShape(4f),
                // 简单举个focusedIndicatorColor的颜色就好其他一样
                colors = TextFieldDefaults.textFieldColors(focusedIndicatorColor = Color.Red)
        )
        OutlinedTextField(
        value = password.value, 
        onValueChange = { password.value = it },
        label = { Text("密码")},
        // 设置输入的文本样式，比如密码的时候输入变成....
        visualTransformation = PasswordVisualTransformation('*'))
    }
  }

二：OutlinedTextField的讲解

OutlinedTextField基本所有的属性都跟TextField是一致的。只是UI效果上有点差异。比如OutlinedTextField默认是圆角的背景框。比如OutlinedTextField的Label的位置是在背景框上等。大家可以去试一试。

由于以前是基于alpha版本写的，现在根据beta04做了下更新
很感谢Jetpack Compose - TextField这篇文章的作者

avatar
文章
阅读
粉丝