Jetpack ComposeでTextのheight/widthを決めたら文字が途切れちゃう・・・

実現したい実装

たまに、Textに対して高さや横幅を指定して、↓のようなコンポーネントを作りたい時があります。

↓のコードで実装できるかなと思いましたが、、、

SampleView.kt@Composable
fun SampleView() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Box(
            modifier = Modifier
                .size(50.dp)
                .background(Color(0xff86b390))
        )

        Text(
            modifier = Modifier
                .height(15.dp), // テキストに高さを指定
            text = "こんにちは、世界",
            fontSize = 20.sp
        )
    }
}

うーん🤔

---

どうやら、フォントサイズよりも小さいフレームサイズを指定すると、切り取られてしまうようです。

(SwiftUI ならいい感じにやってくれるんですが。。)

ちなみに文字と要素の間に余白が開いているのは、FontPaddingのせいですね。

参考：Fixing Font Padding in Compose Text

解決策

wrapContentSize モディファイアを適用します。

SampleView.kt@Composable
fun SampleView(modifier: Modifier = Modifier) {
    Column {
        Text(
            modifier = Modifier
                        .height(20.dp)
                        .wrapContentSize(unbound = true), // 追加！！
            text = "テキストテキストテキスト",
            fontSize = 30.sp
        )
    }
}

@Preview
@Composable
fun Preview() {
    SampleView()
}

wrapContentSize モディファイアを使えば、その要素に指定されたサイズを無視して表示することができます。

引数に指定している「unbound」は、制約よりも大きくする(true)か小さくする(false)かです。