Jetpack Compose TextField 剪切滚动文本

Question

我有一个TextField固定高度的。当用户输入较长的文本时，它会滚动。滚动时它将截断填充内的任何文本：

基本上是这样的：

var text by remember { mutableStateOf("") }
TextField(
    value = text,
    onValueChange = { value -> text = value },
    modifier = modifier
        .fillMaxWidth()
        .height(100.dp),
    colors = TextFieldDefaults.textFieldColors(
        focusedIndicatorColor = Color.Transparent,
        unfocusedIndicatorColor = Color.Transparent,
        backgroundColor = Color.Transparent
    )
)

可以直接TextField使用来调整/删除 a 的填充BasicTextField，例如参见此堆栈溢出问题。

不过，我想保留填充，但在用户滚动时不剪切文本。一个简单的Text可组合项就有这种行为。

Answer 1

您可以使用BasicTextField和修改其decorationBox参数。只需将其放入innerTextField()可滚动条中Column并Spacer在其顶部和底部添加 s 即可。

var text by remember {
        mutableStateOf("Hello Stackoverflow")
    }
    val paddingSize = remember { 16.dp }

    BasicTextField(
        modifier = Modifier
            .height(100.dp),
        value = text,
        onValueChange = { text = it },
        decorationBox = { innerTextField ->
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .verticalScroll(state = rememberScrollState())
            ) {
                Spacer(modifier = Modifier.height(paddingSize))
                innerTextField()
                Spacer(modifier = Modifier.height(paddingSize))
            }

        }
    )