compose中的TextField

TextField位于androidx.compose.ui:ui-text包下，属于Text体系里面的。该函数类似EditText，样式就是MD风格

基础API

@Composable
fun TextField(
    // 输入框内容
    value: String,
    // 内容更改回调 比较简单就是类似EditText中addTextChangedListener函数监听值变化
    onValueChange: (String) -> Unit,
    // 基础样式
    modifier: Modifier = Modifier,
    // 是否可编辑和聚焦 是否可用，等价于Android中的enable属性
    enabled: Boolean = true,
    // 是否只读，只读状态下，编辑框内容不可以编辑，但是可以获取焦点、移动光标 聚焦复制内容
    readOnly: Boolean = false,
    // 文字样式，类型为TextStyle，我们可以看到该函数可以配置文本的颜色，大小，权重，字体等各种属性
    textStyle: TextStyle = LocalTextStyle.current,
    // Material风格的Label
    label: @Composable (() -> Unit)? = null,
    // 文字为空时占位内容 这个就是TextView中配置的hint属性一样，需要注意的是如何和label一起使用，会被覆盖效果，只有获取焦点时候才会被显示出来
    placeholder: @Composable (() -> Unit)? = null,
    // 文字前的图标
    leadingIcon: @Composable (() -> Unit)? = null,
    // 文字后的图标
    trailingIcon: @Composable (() -> Unit)? = null,
    // 当前是否是错误状态
    isError: Boolean = false,
    // 文字效果应用，可实现输入密码等效果。 可以简单的理解为EditText中的inputType
    //可视化转换，该属性类型是一个接口VisualTransformation。
	//默认实现类是PasswordVisualTransformation，主要是将输入的内容转换为*****代替，与inputType属性设置为password效果一样.
	//我们也可以自己实现VisualTransformation该接口来实现一些其他转换，比如限制长度、部分输入文本的特殊处理、输入文本类型校验等等
    visualTransformation: VisualTransformation = VisualTransformation.None,
    // 可以用于配置输入框类型。可以定义为return/search等
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    // 可以用于配置输入框Enter键盘类型。 按下软键盘上返回键的回调
    keyboardActions: KeyboardActions = KeyboardActions(),
    // 是否单行
    singleLine: Boolean = false,
    // 最大行
    maxLines: Int = Int.MAX_VALUE,
    // 监听组件交互变化
    //interactionSource 处理状态的属性，比如按下的时候什么效果，正常时候什么效果，获取焦点时候什么效果等。类似之前再布局文件里写Selector。			
    //interactionSource.collectIsPressedAsState() 判断是否按下状态
    //interactionSource.collectIsFocusedAsState() 判断是否获取焦点的状态	
    //interactionSource.collectIsDraggedAsState() 判断是否拖动
    interactionSource: MutableInteractionSource = remember {
    
     MutableInteractionSource() },
    // 定义此文本框的形状(不包含背景)
    shape: Shape =
        MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize),
    // 输入框颜色  用来定义文字，光标等的处于不同状态的颜色
    colors: TextFieldColors = TextFieldDefaults.textFieldColors()
)

基本用法

@Composable
fun TextFieldDemo(context: Context) {
    
    
    // 定义一个可观测的text，用来在TextField中展示
    var text by remember {
    
    
        mutableStateOf("")
    }
    TextField(
        value = text, // 显示文本
        onValueChange = {
    
     text = it }, // 文字改变时，就赋值给text
        label = {
    
     Text(text = "Input") }, // label是Input
        // 头部图标，设置为搜索
        leadingIcon = @Composable {
    
    
            Image(
                imageVector = Icons.Filled.Search, // 搜索图标
                contentDescription = null,
                modifier = Modifier.clickable {
    
     Toast.makeText(context, "search $text", Toast.LENGTH_SHORT).show() }) // 给图标添加点击事件，点击就吐司提示内容
        },
        // 尾部图标，设置为清除
        trailingIcon = @Composable {
    
    
            Image(imageVector = Icons.Filled.Clear, // 清除图标
                contentDescription = null,
                modifier = Modifier.clickable {
    
     text = "" }) // 给图标添加点击事件，点击就清空text
        },
        placeholder = @Composable {
    
     Text(text = "This is placeholder") }, // 不输入内容时的占位符
    )
}

轮廓式文本框OutlinedTextField

API跟TextField都一样的，只是样式不同而已

基本文本框BasicTextField

BasicTextField可以用来响应硬件或软件盘编辑文字，可以自定义cursor、边框等，但是没有placeholder和label属性。API如下:

fun BasicTextField(
    // 文字，也可以传入TextFieldValue
    value: String, 
    // 文字改变的回调
    onValueChange: (String) -> Unit, 
     // 修饰符
    modifier: Modifier = Modifier,
    // 是否可用
    enabled: Boolean = true, 
    // 是否只读
    readOnly: Boolean = false, 
    // 文字样式
    textStyle: TextStyle = TextStyle.Default, 
    // 定义软键盘上的返回键的功能，可以定义为return/search等
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default, 
    // 按下软键盘上返回键的回调
    keyboardActions: KeyboardActions = KeyboardActions.Default, 
     // 是否是单行
    singleLine: Boolean = false,
     // 最大行数
    maxLines: Int = Int.MAX_VALUE,
    // 可以简单的理解为EditText中的inputType
    visualTransformation: VisualTransformation = VisualTransformation.None, 
     // 布局变化的回调
    onTextLayout: (TextLayoutResult) -> Unit = {
    
    },
     // 监听组件交互变化
    interactionSource: MutableInteractionSource = remember {
    
     MutableInteractionSource() },
     // 光标颜色设置
    cursorBrush: Brush = SolidColor(Color.Black),
    // 用来定义装饰框，innerTextField这个参数就是用来绘制文字的
    decorationBox: @Composable (innerTextField: @Composable () -> Unit) -> Unit = 
        @Composable {
    
     innerTextField -> innerTextField() }
)

基本用法

@Composable
fun BasicTextFieldDemo2() {
    
    
    var text by remember {
    
     mutableStateOf("hello") }
    BasicTextField(
        value = text,
        onValueChange = {
    
     text = it },
        modifier = Modifier
            .background(Color.Gray, RoundedCornerShape(8.dp))
            .padding(5.dp), // 灰色背景
        cursorBrush = SolidColor(Color.Red),
        decorationBox = @Composable {
    
     innerTextField ->
            Canvas(modifier = Modifier.size(width = 100.dp, height = 50.dp)) {
    
    
                drawRect(color = Color.Red, style = Stroke(width = 1F))
            }
            innerTextField()
        }
    )
}