android - 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
    )
)

可以通过直接使用 BasicTextField 调整/删除 TextField 的填充，例如见this stack overflow question .

但是我想保留填充，但在用户滚动时不剪裁文本。一个简单的 Text Composable 具有这种行为。

Answer 1

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

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))
            }

        }
    )