Android Compose 五：常用组件 TextField

1、基本使用

1.1 随便用用

TextField(value = "吃吃吃", onValueChange = {})

结果

点击输入框可以弹出软键盘
光标显示正常到文字最后位置
文字 “吃吃吃” 无法删除
输入文本无法变更

1.2 使用

 val text = remember {mutableStateOf("这一个输入框") }
TextField(
       value = text.value,
       onValueChange = {text.value = it},
   )

结果：
可正常输入删除 value参数需要一个动态的值来表示显示

1.3 enabled 默认true 是否可用

enabled = false 不可用
结果

输入框不可操作约等于文本显示效果

1.4 readOnly 默认false 是否只读

readOnly = true

TextField(
           value = text.value,
           onValueChange = {text.value = it},
           modifier = Modifier.clickable {
              Log.i("text_compose","点击>>")
           },
           readOnly = true,
       )

结果

点击不弹出输入框
点击有选中效果但点击事件未触发
文字可通过设置 text.value变更

1.5 textStyle 基本上与Text的style 一样

Text 的 style: TextStyle = LocalTextStyle.current
TextField 的 textStyle: TextStyle = LocalTextStyle.current,

 constructor(
        color: Color = Color.Unspecified,    // 与Text的color效果一致 设置文字颜色   优先级低于 Text的color
        fontSize: TextUnit = TextUnit.Unspecified,  //设置字体大小   优先级低于 Text的
        fontWeight: FontWeight? = null,   //设置字体权重   优先级低于 Text的
        fontStyle: FontStyle? = null,   //设置字体斜体   优先级低于 Text的
        fontSynthesis: FontSynthesis? = null,     大概可能就是使用的fontFamily 没有粗体或者斜体的时候，系统给造一个
        fontFamily: FontFamily? = null,   //设置字体  草书什么的
        fontFeatureSettings: String? = null,   //字体的高级设置  与 CCS一致
        letterSpacing: TextUnit = TextUnit.Unspecified,     //文字间隔
        baselineShift: BaselineShift? = null,    //文字基线
        textGeometricTransform: TextGeometricTransform? = null,   //缩放与倾斜
        localeList: LocaleList? = null,
        background: Color = Color.Unspecified,   //背景
        textDecoration: TextDecoration? = null,     //下划线删除线
        shadow: Shadow? = null,   //阴影
        textAlign: TextAlign? = null,       //对齐方式
        textDirection: TextDirection? = null,  //文字方向
        lineHeight: TextUnit = TextUnit.Unspecified, //行高
        textIndent: TextIndent? = null  //缩进
    )

1.5.1 TextStyle - color

textStyle = TextStyle(
               color = Color(0xFFFF0000)
           ),

效果
在这里插入图片描述

1.5.2 TextStyle - fontSize

textStyle = TextStyle(
               color = Color(0xFFFF0000),
               fontSize = 50.sp
           ),

在这里插入图片描述

1.5.3 TextStyle - fontWeight

 textStyle = TextStyle(
               color = Color(0xFFFF0000),
               fontSize = 50.sp,
               fontWeight = FontWeight.Bold
           ),

效果
在这里插入图片描述

1.5.4 TextStyle - fontStyle

 textStyle = TextStyle(
               color = Color(0xFFFF0000),
               fontSize = 50.sp,
               fontWeight = FontWeight.Bold,
               fontStyle = FontStyle.Italic,
           ),

结果
在这里插入图片描述

1.5.5 TextStyle - baselineShift

 textStyle = TextStyle(
               color = Color(0xFFFF0000),
               fontSize = 50.sp,
               fontWeight = FontWeight.Bold,
               fontStyle = FontStyle.Italic,
               baselineShift = BaselineShift(0.6f)
           ),

结果
在这里插入图片描述

1.5.6 TextStyle - textGeometricTransform

 textStyle = TextStyle(
               color = Color(0xFFFF0000),
               fontSize = 50.sp,
               fontWeight = FontWeight.Bold,
               fontStyle = FontStyle.Italic,
               baselineShift = BaselineShift(0.6f),
               textGeometricTransform = TextGeometricTransform(0.5f,0.5f)
           ),

结果
在这里插入图片描述

1.5.7 TextStyle - background

 textStyle = TextStyle(
               color = Color(0xFFFF0000),
               fontSize = 50.sp,
               fontWeight = FontWeight.Bold,
               fontStyle = FontStyle.Italic,
               baselineShift = BaselineShift(0.6f),
               textGeometricTransform = TextGeometricTransform(0.5f,0.5f),
               background = Color(0xFF00FF00)
           ),

效果
在这里插入图片描述

1.5.8 TextStyle - textDecoration

 textStyle = TextStyle(
               color = Color(0xFFFF0000),
               fontSize = 50.sp,
               fontWeight = FontWeight.Bold,
               fontStyle = FontStyle.Italic,
               baselineShift = BaselineShift(0.6f),
               textGeometricTransform = TextGeometricTransform(0.5f,0.5f),
               background = Color(0xFF00FF00),
               textDecoration = TextDecoration.LineThrough
           ),

效果
在这里插入图片描述

1.5.9 TextStyle - shadow

textStyle = TextStyle(
               color = Color(0xFFFF0000),
               fontSize = 50.sp,
               fontWeight = FontWeight.Bold,
               fontStyle = FontStyle.Italic,
               baselineShift = BaselineShift(0.6f),
               textGeometricTransform = TextGeometricTransform(0.5f,0.5f),
               background = Color(0xFF00FF00),
               textDecoration = TextDecoration.LineThrough,
               shadow = Shadow(color= Color(0xFF0000FF), Offset(5f,10f),3f)
           ),

效果
在这里插入图片描述

1.5.10 TextStyle - textAlign

 textStyle = TextStyle(
               color = Color(0xFFFF0000),
               fontSize = 50.sp,
               fontWeight = FontWeight.Bold,
               fontStyle = FontStyle.Italic,
               baselineShift = BaselineShift(0.6f),
               textGeometricTransform = TextGeometricTransform(0.5f,0.5f),
               background = Color(0xFF00FF00),
               textDecoration = TextDecoration.LineThrough,
               shadow = Shadow(color= Color(0xFF0000FF), Offset(5f,10f),3f),
               textAlign = TextAlign.Right
           ),

效果
在这里插入图片描述

1.5.11 TextStyle - textDirection 文字方向从右往左或从左往右

Rtl right to left
Ltr left to right

textStyle = TextStyle(
               color = Color(0xFFFF0000),
               fontSize = 50.sp,
               fontWeight = FontWeight.Bold,
               fontStyle = FontStyle.Italic,
               baselineShift = BaselineShift(0.6f),
               textGeometricTransform = TextGeometricTransform(0.5f,0.5f),
               background = Color(0xFF00FF00),
               textDecoration = TextDecoration.LineThrough,
               shadow = Shadow(color= Color(0xFF0000FF), Offset(5f,10f),3f),
               textAlign = TextAlign.Right,
               textDirection = TextDirection.Rtl
           ),

效果：测试手机无效果
在这里插入图片描述

1.5.12 TextStyle - lineHeight

 textStyle = TextStyle(
               color = Color(0xFFFF0000),
               fontSize = 50.sp,
               fontWeight = FontWeight.Bold,
               fontStyle = FontStyle.Italic,
               baselineShift = BaselineShift(0.6f),
               textGeometricTransform = TextGeometricTransform(0.5f,0.5f),
               background = Color(0xFF00FF00),
               textDecoration = TextDecoration.LineThrough,
               shadow = Shadow(color= Color(0xFF0000FF), Offset(5f,10f),3f),
               textAlign = TextAlign.Right,
               textDirection = TextDirection.Rtl,
               lineHeight = 200.sp
           ),

结果无效果
在这里插入图片描述

1.5.13 TextStyle - textIndent

textStyle = TextStyle(
               color = Color(0xFFFF0000),
               fontSize = 50.sp,
               fontWeight = FontWeight.Bold,
               fontStyle = FontStyle.Italic,
               baselineShift = BaselineShift(0.6f),
               textGeometricTransform = TextGeometricTransform(0.5f,0.5f),
               background = Color(0xFF00FF00),
               textDecoration = TextDecoration.LineThrough,
               shadow = Shadow(color= Color(0xFF0000FF), Offset(5f,10f),3f),
               textAlign = TextAlign.Right,
               textDirection = TextDirection.Rtl,
               lineHeight = 200.sp,
               textIndent = TextIndent(50.sp,100.sp)
           ),

效果
在这里插入图片描述

1.5 label 输入框的标签

val text = remember {
        mutableStateOf("")
    }
TextField(
           value = text.value,
           onValueChange = {text.value = it},
           modifier = Modifier.clickable {
              Log.i("text_compose","点击>>")
           },
           label = {Text(text = "这是一个lable")},

       )

效果
请添加图片描述
如果text有默认值

val text = remember {
        mutableStateOf("这一个输入框")
    }

效果
请添加图片描述

1.6 placeholder 占位内容当文本框为空时显示

val text = remember { mutableStateOf(“”) } //不设置默认值
删除lable

val text = remember {
          mutableStateOf("")
      }

      TextField(
          value = text.value,
          onValueChange = {text.value = it},
          modifier = Modifier.clickable {
             Log.i("text_compose","点击>>")
          },

          placeholder = {Text(text = "这是一个placeholder")},
      )

效果如下
请添加图片描述

1.7 leadingIcon trailingIcon

在这里插入图片描述

 TextField(
           value = text.value,
           onValueChange = {text.value = it},
           modifier = Modifier.clickable {
              Log.i("text_compose","点击>>")
           },

           placeholder = {Text(text = "这是一个placeholder")},
           leadingIcon = {
               Image(painter = painterResource(id = R.drawable.ic_cattle), contentDescription = "")
           },
           trailingIcon = {
               Image(painter = painterResource(id = R.drawable.ic_cattle), contentDescription = "")
           },
       )

效果
在这里插入图片描述

1.8 supportingText

在这里插入图片描述

 TextField(
           value = text.value,
           onValueChange = {text.value = it},
           modifier = Modifier.clickable {
              Log.i("text_compose","点击>>")
           },

           placeholder = {Text(text = "这是一个placeholder")},
           leadingIcon = {
               Image(painter = painterResource(id = R.drawable.ic_cattle), contentDescription = "")
           },
           trailingIcon = {
               Image(painter = painterResource(id = R.drawable.ic_cattle), contentDescription = "")
           },
           supportingText = {Text(text = "这是一个supportingText")},
       )

效果
在这里插入图片描述

isError = true,

在这里插入图片描述

实现有错误时，文本框底部提醒功能

场景，列入登录时的账号不存在，或者密码错误

 val text = remember {
           mutableStateOf("")
       }

       val isError = remember {
           mutableStateOf(false)
       }

       TextField(
           value = text.value,
           onValueChange = {text.value = it},
           modifier = Modifier.clickable {
              Log.i("text_compose","点击>>")
           },

           placeholder = {Text(text = "这是一个placeholder")},
           leadingIcon = {
               Image(painter = painterResource(id = R.drawable.ic_cattle), contentDescription = "")
           },
           trailingIcon = {
               Image(painter = painterResource(id = R.drawable.ic_cattle), contentDescription = "")
           },
           supportingText = {
               AnimatedVisibility(visible = isError.value){
                   Text(text = "这是一个supportingText")
               }
            },
           isError = isError.value,
       )

       Text(text = "点我", modifier = Modifier.clickable {
           isError.value = !isError.value }, )

效果
请添加图片描述

1.9 visualTransformation 把输入的文字转换成指定的字符

在这里插入图片描述
密码加密

visualTransformation = PasswordVisualTransformation()

效果
请添加图片描述
也可以指定字符

 visualTransformation = PasswordVisualTransformation(mask = '啦')

效果就是输入的字符全变成啦
在这里插入图片描述

1.10 keyboardOptions 设置键盘类型和发送/确认/go按钮的文字

在这里插入图片描述

弹出密码键盘

keyboardOptions = KeyboardOptions(
               keyboardType = KeyboardType.Password
           )

在这里插入图片描述

keyboardType = KeyboardType.Number
在这里插入图片描述

imeAction
在这里插入图片描述
imeAction = ImeAction.Next

imeAction = ImeAction.Search 键盘按钮变成搜索
在这里插入图片描述

1.11 keyboardActions 触发键盘的按钮发送事件

 TextField(
           value = text.value,
           modifier = Modifier.fillMaxWidth(),
           onValueChange = {text.value = it},
           placeholder = {Text(text = "这是一个placeholder")},
           singleLine = true,
           keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
           keyboardActions = KeyboardActions(
               onAny = {
                   Log.i("text_compose","KeyboardActions>>")
               }
           ),
           colors = TextFieldDefaults.textFieldColors(
               focusedIndicatorColor = Color.Red,
               unfocusedIndicatorColor = Color.Blue,
               containerColor = Color.Transparent,
               textColor = TEXT_COLOR_333,
               placeholderColor = TEXT_COLOR_999,
               cursorColor = Color.Cyan
           )
       )

效果，日志
在这里插入图片描述

1.12 singleLine 是否一行

1.13 maxLines 最大行数与singleLine 互斥

maxLines = 3, 最大三行
在这里插入图片描述

1.14 interactionSource 用于设置交互源，以便对输入框进行手势交互

在这里插入图片描述

1.15 shape输入框的形状

设置圆角矩形
shape = RoundedCornerShape(20.dp)

效果
在这里插入图片描述

1.16 colors 所有的颜色都通过此设置

例如无焦点相关获取到焦点相关光标颜色内容文字背景等颜色
在这里插入图片描述

 TextField(
           value = text.value,
           onValueChange = {text.value = it},
           placeholder = {Text(text = "这是一个placeholder")},
           shape = CircleShape,
           colors = TextFieldDefaults.textFieldColors(
               focusedIndicatorColor = Color(0xFFFF0000),
               disabledIndicatorColor = Color(0xFF00FF00),
               unfocusedIndicatorColor = Color(0xFF0000FF),
           )
       )

未获取焦点时底部横线颜色
在这里插入图片描述

获取焦点时底部横线颜色
在这里插入图片描述

自定义输入框背景样式

1 圆角矩形

去除底部横线

 colors = TextFieldDefaults.textFieldColors(
               focusedIndicatorColor = Color.Transparent,
               disabledIndicatorColor = Color.Transparent,
               unfocusedIndicatorColor = Color.Transparent,
           )

TextField(
           value = text.value,
           modifier = Modifier.fillMaxWidth(),
           onValueChange = {text.value = it},
           placeholder = {Text(text = "这是一个placeholder")},
           shape = RoundedCornerShape(10),
           colors = TextFieldDefaults.textFieldColors(
               focusedIndicatorColor = Color.Transparent,
               disabledIndicatorColor = Color.Transparent,
               unfocusedIndicatorColor = Color.Transparent,
               containerColor = Color.Red,
               textColor = Color.White,
               placeholderColor = Color.White
           )
       )

效果：
在这里插入图片描述

2 椭圆

修改shape

shape = CircleShape,

在这里插入图片描述

3 下滑线

TextField(
           value = text.value,
           modifier = Modifier.fillMaxWidth(),
           onValueChange = {text.value = it},
           placeholder = {Text(text = "这是一个placeholder")},
           colors = TextFieldDefaults.textFieldColors(
               focusedIndicatorColor = Color.Red,
               unfocusedIndicatorColor = Color.Blue,
               containerColor = Color.Transparent,
               textColor = TEXT_COLOR_333,
               placeholderColor = TEXT_COLOR_999
           )
       )

效果
在这里插入图片描述
获取焦点后

4设置光标颜色 cursorColor = Color.Cyan

 colors = TextFieldDefaults.textFieldColors(
               focusedIndicatorColor = Color.Red,
               unfocusedIndicatorColor = Color.Blue,
               containerColor = Color.Transparent,
               textColor = TEXT_COLOR_333,
               placeholderColor = TEXT_COLOR_999,
               cursorColor = Color.Cyan
           )

输入变化监听

就使用

 onValueChange = {text.value = it},

键盘弹出与隐藏


 val keyboardController = LocalSoftwareKeyboardController.current

 TextField(
           value = text.value,
           modifier = Modifier.fillMaxWidth(),
           onValueChange = {text.value = it},
           placeholder = {Text(text = "这是一个placeholder")},
           singleLine = true,
           keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
           keyboardActions = KeyboardActions(
               onAny = {
                   Log.i("text_compose","KeyboardActions>>")
               }
           ),
           colors = TextFieldDefaults.textFieldColors(
               focusedIndicatorColor = Color.Red,
               unfocusedIndicatorColor = Color.Blue,
               containerColor = Color.Transparent,
               textColor = TEXT_COLOR_333,
               placeholderColor = TEXT_COLOR_999,
               cursorColor = Color.Cyan
           )
       )


       Text(
           text = "弹出软键盘",
           modifier = Modifier.clickable { keyboardController?.show() }
       )
       Text(
           text = "隐藏软键盘",
           modifier = Modifier.clickable { keyboardController?.hide() }
       )

弹出软键盘需要在软键盘弹出一次，的情况下才有效果（也就是TextField获取到焦点之后），否则不会弹出

请添加图片描述

键盘弹出与隐藏监听用到再瞅

聊天布局效果

 Column(modifier = Modifier) {

  
       Box(
           modifier = Modifier.weight(1f)
       ) {

       }

       val text = remember {
           mutableStateOf("")
       }
       TextField(
           value = text.value,
           modifier = Modifier.fillMaxWidth(),
           onValueChange = {text.value = it},
           placeholder = {Text(text = "这是一个placeholder")},
           singleLine = true,
           keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
           keyboardActions = KeyboardActions(
               onAny = {
                   Log.i("text_compose","KeyboardActions>>")
               }
           ),
           colors = TextFieldDefaults.textFieldColors(
               focusedIndicatorColor = Color.Red,
               unfocusedIndicatorColor = Color.Blue,
               containerColor = Color.Transparent,
               textColor = TEXT_COLOR_333,
               placeholderColor = TEXT_COLOR_999,
               cursorColor = Color.Cyan
           )
       )
   }

请添加图片描述