Compose全新文本输入框? 拿来吧你

/ 前言 /

Jetpack Compose是用于构建原生Android UI的现代工具包，使用更简洁的代码、强大的工具和直观的Kotlin API，简化并加速了Android上的UI开发。不同于Andorid常见的Xml+命令式Coding的UI开发范式，Compose基于Kotlin的DSL实现了一套类似React的声明式UI框架。伴随React Native、Flutter等大前端框架的兴起以及Jetpack Compose、SwiftUI等native框架的出现，声明式UI正逐渐成为客户端UI开发的新趋势，那么下面主要就来介绍一下Compose中全新的文本框。

/ 基本API介绍 /

@Composable
fun TextField(
    value: TextFieldValue,//要展示的文本
    onValueChange: (TextFieldValue) -> 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,//指定输入类型，类似inputType
    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()//各种cursor、文本等颜色
)

/ 基础用法 /

日常开发中，经常会使用到文本输入框；一般样式为左边是一个搜索的图标，右边是清楚文本图标，如果文本框未输入，则提示hint关键词,效果大概是以下这种:

那么如何用compose实现上述满足我们日常用法的输入框呢,代码如下：

@Composable
fun ShowTextField(context: MainActivity) {
    //初始化文本变量
    var text by remember { mutableStateOf("") }

    TextField(
        value = text, // 显示文本
        onValueChange = { text = it }, // 监听文本变化，并赋值给text
        label = { Text(text = "Input") }