Jetpack Compose TextField如何实现始终显示占位符且输入内容RTL居右

原生TextField的自带placeholder参数默认会在输入内容时隐藏，无法满足固定显示的需求，我们可以通过自定义输入框布局实现需求，以下是两种可行方案：

方案1：使用BasicTextField自定义（灵活度最高） #

通过BasicTextField的decorationBox参数自定义输入框内部布局，将占位文本固定在左侧，输入区域居右显示：

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp

@Composable
fun FixedPlaceholderTextField(
    placeholderText: String,
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    textStyle: TextStyle = LocalTextStyle.current
) {
    BasicTextField(
        value = value,
        onValueChange = onValueChange,
        modifier = modifier,
        textStyle = textStyle.copy(textAlign = TextAlign.End),
        singleLine = true,
        decorationBox = { innerTextField ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 16.dp, vertical = 12.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                // 固定左侧的占位文本，始终显示
                Text(
                    text = placeholderText,
                    style = textStyle.copy(color = Color.Gray),
                    modifier = Modifier.padding(end = 8.dp)
                )
                // 输入内容区域，占满剩余宽度，内容居右
                Box(
                    modifier = Modifier.weight(1f),
                    contentAlignment = Alignment.CenterEnd
                ) {
                    innerTextField()
                }
            }
        }
    )
}

调用示例 #

import androidx.compose.foundation.border
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

var inputText by remember { mutableStateOf("") }
FixedPlaceholderTextField(
    placeholderText = "备注：",
    value = inputText,
    onValueChange = { inputText = it },
    modifier = Modifier
        .fillMaxWidth()
        .border(1.dp, Color.LightGray, RoundedCornerShape(4.dp))
)

方案2：复用Material TextField组件（适配原生样式更快） #

如果需要直接使用Material Design的输入框样式，可以用leadingIcon参数放置固定占位文本，同时设置文本右对齐：

import androidx.compose.material3.TextField
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp

var inputText by remember { mutableStateOf("") }
TextField(
    value = inputText,
    onValueChange = { inputText = it },
    modifier = Modifier.fillMaxWidth(),
    leadingIcon = {
        Text(
            text = "备注：",
            color = Color.Gray,
            modifier = Modifier.padding(start = 16.dp)
        )
    },
    textStyle = TextStyle(textAlign = TextAlign.End),
    placeholder = null // 禁用自带占位符
)

注意事项 #

• 两种方案都不需要修改系统全局的RTL布局配置，不会影响页面其他组件的布局方向
• 如果需要支持长文本输入，可添加singleLine = true配置，输入内容超出宽度后会自动横向滚动，不会遮挡左侧固定占位文本
• 可根据业务需求自行调整内边距、边框、颜色等样式，和设计稿对齐

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