如何在Jetpack Compose中创建多行文本输入框

根据你提供的样式图，这个TextField包含前置图标、浮动提示标签和自定义底部指示器，以下是两种主流实现方式：

Jetpack Compose 实现（Material3） #

@Composable
fun StyledTextField(
    inputValue: String,
    onInputChange: (String) -> Unit,
    hintText: String,
    leadingIcon: @Composable () -> Unit,
    modifier: Modifier = Modifier
) {
    TextField(
        value = inputValue,
        onValueChange = onInputChange,
        label = { Text(hintText) },
        leadingIcon = leadingIcon,
        modifier = modifier.fillMaxWidth(),
        colors = TextFieldDefaults.colors(
            // 去除输入框背景色
            focusedContainerColor = Color.Transparent,
            unfocusedContainerColor = Color.Transparent,
            // 自定义指示器颜色
            focusedIndicatorColor = Color(0xFF2196F3),
            unfocusedIndicatorColor = Color.Gray.copy(alpha = 0.6f),
            // 浮动标签颜色
            focusedLabelColor = Color(0xFF2196F3),
            unfocusedLabelColor = Color.Gray
        ),
        shape = RoundedCornerShape(0.dp) // 保持直角边框，匹配图中样式
    )
}

XML 布局实现（Material Components） #

<!-- 外层TextInputLayout控制标签和图标 -->
<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="请输入内容"
    app:hintEnabled="true"
    app:hintAnimationEnabled="true"
    app:startIconDrawable="@drawable/ic_your_icon"
    app:boxStrokeColor="@color/blue"
    app:boxStrokeWidthFocused="2dp"
    app:boxStrokeWidth="1dp"
    app:boxBackgroundColor="@android:color/transparent">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:inputType="text"/>

</com.google.android.material.textfield.TextInputLayout>

进阶完全自定义（Compose） #

如果需要更贴合图中细节（比如特殊样式的底部线条），可以用BasicTextField完全自定义布局：

@Composable
fun FullyCustomStyledTextField(
    inputValue: String,
    onInputChange: (String) -> Unit,
    hintText: String,
    leadingIcon: @Composable () -> Unit,
    modifier: Modifier = Modifier
) {
    BasicTextField(
        value = inputValue,
        onValueChange = onInputChange,
        modifier = modifier
            .fillMaxWidth()
            .padding(vertical = 10.dp),
        decorationBox = { innerTextField ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.Start,
                modifier = Modifier.fillMaxWidth()
            ) {
                // 前置图标
                leadingIcon()
                Spacer(modifier = Modifier.width(12.dp))
                // 标签+输入区域
                Column(
                    modifier = Modifier.weight(1f),
                    verticalArrangement = Arrangement.Center
                ) {
                    // 浮动标签
                    Text(
                        text = hintText,
                        color = if (inputValue.isNotEmpty()) Color(0xFF2196F3) else Color.Gray,
                        fontSize = if (inputValue.isNotEmpty()) 12.sp else 16.sp,
                        modifier = Modifier.offset(y = if (inputValue.isNotEmpty()) (-8).dp else 0.dp)
                    )
                    // 输入框本体
                    innerTextField()
                    // 自定义底部线条
                    Divider(
                        color = if (inputValue.isNotEmpty()) Color(0xFF2196F3) else Color.Gray.copy(alpha = 0.6f),
                        thickness = if (inputValue.isNotEmpty()) 2.dp else 1.dp,
                        modifier = Modifier.padding(top = 4.dp)
                    )
                }
            }
        }
    )
}

内容的提问来源于stack exchange，提问作者nayan dhabarde