Question

出于各种原因，Text 的高度应始终至少等于 x 行文本，无论它的文本行数是否少于 x 行。 Text 和 BasicText Composables 只有 maxLines 参数但没有 minLines

我尝试了以下 (x = 3)：

Text(
    modifier = Modifier.sizeIn(minHeight = with(LocalDensity.current) {
       (42*3).sp.toDp()
    }),
    color = MaterialTheme.colors.onPrimary,
    text = "Sample", textAlign = TextAlign.Center,
    style = MaterialTheme.typography.h2 /* fontSize = 42 */,
    lineHeight = 42.sp
)

结果高度小于文本包含 3 行时的高度

回到 View World Android，我们可以简单地使用 minLines=3，我们如何在 Jetpack Compose 中实现这一点？

Answer 1

您的代码几乎正确，只需将 lineHeight 设置为 fontSize*4/3：

var lineHeight = MaterialTheme.typography.h2.fontSize*4/3

Text(
    modifier = Modifier.sizeIn(minHeight = with(LocalDensity.current) {
       (lineHeight*3).toDp()
    }),
    color = MaterialTheme.colors.onPrimary,
    text = "Sample", textAlign = TextAlign.Center,
    style = MaterialTheme.typography.h2,
    lineHeight = lineHeight
)

但是你可以使用 onTextLayout 回调来做类似的事情而不需要计算：

fun main() = Window {
    var text by remember { mutableStateOf("Hello, World!") }
    var lines by remember { mutableStateOf(0) }

    MaterialTheme {
        Button(onClick = {
            text += "\nnew line"
        }) {
            Column {
                Text(text,
                    maxLines = 5,
                    style = MaterialTheme.typography.h2,
                    onTextLayout = { res -> lines = res.lineCount })
                for (i in lines..2) {
                    Text(" ", style = MaterialTheme.typography.h2)
                }
            }
        }
    }
}

在 Jetpack Compose 中为文本指定最少行数

1 个答案: