使用Jetpack Compose构建一个多行文本提示的TextField

前言

Jetpack Compose 作为 Android 应用开发中的新兴工具，正在以其简洁直观的方式改变着用户界面的构建方式。本文将通过案例学习如何利用函数的组合和参数化，轻松地复用和自定义组件，帮助您更加高效地利用 Jetpack Compose 构建出色的用户界面。

什么是 decorationBox

decorationBox 接受一个 lambda 表达式，该表达式定义了装饰框架的内容。在这个 lambda 表达式中，你可以使用 Compose 提供的其他函数来构建输入框的样式和装饰。比如，你可以使用 background() 函数来设置背景色、border() 函数来添加边框等。

示例

创建一个名为 MultilineHintTextField 的自定义组件，它是一个 @Composable 函数，该函数传递几个参数来定制 TextField 的外观和行为。

@Composable
fun MultilineHintTextField(
      value: String,
      maxLines: Int = 4,
      hintText: String = "",
      modifier: Modifier = Modifier,
      onValueChange: (String) -> Unit,
      textStyle: TextStyle = MaterialTheme.typography.bodyLarge
) {
      BasicTextField(
            value = value,
            maxLines = maxLines,
            textStyle = textStyle,
            onValueChange = onValueChange,
            decorationBox = { innerTextField ->
                  //这里定义装饰框架的内容
                  ...
            }
      )
}

通过 decorationBox 参数，定义了一个装饰框架 innerTextField 代表 BasicTextField 作为装饰框的子组件。如果 value 为空（即用户尚未输入文本），则会在TextField上方以半透明的方式显示 hintText。

decorationBox = { innerTextField ->
      //这里定义装饰框架的内容
      Box(modifier = modifier) {
            innerTextField()
            if (value.isEmpty()) {
                  Text(
                        text = hintText,
                        color = LocalContentColor.current.copy(alpha = 0.5f)
                  )
            }
      }
}

在 MainActivity 上使用它，hintText 并没有行数限制，外部调用时只需要传入一个多行的文本即可。

setContent {
    CustomMultilineHintTextFieldTheme {
        var text by remember {
            mutableStateOf("")
        }
        val multilineText="Hello\nWelcome to the android\nLearning jetpack compose..."

         Column(
             modifier = Modifier
                .fillMaxSize()
                .padding(12.dp)
         ){
             MultilineHintTextField(
                 value = text,
                 hintText = multilineText,
                 onValueChange = { text = it },
                 modifier = Modifier
                     .fillMaxWidth()
                     .clip(RoundedCornerShape(8.dp))
                     .background(Color.LightGray)
                     .padding(16.dp),
                 maxLines = 6
           )
       }
   }
}

运行效果

源码地址：https://github.com/AAnthonyyyy/MultilineHintTextField
欢迎 Star ！

最后，可以关注一下本人的公众号，会不定期发布一些关于 Android、Kotlin、Jetpack Compose相关的学习笔记和知识，感谢支持。