🔖

JetpackCompose Textの横に別要素があり、Textがoverflowした場合に横の別要素が消えてしまう場合の解決方法

2021/11/24に公開

結論

TextにModifier.weightを当ててあげましょう。

サンプルコード


Row(
	horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .background(backgroundColor)
            .fillMaxWidth()
) {
	Text(
            text = "hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge",
            modifier = Modifier.weight(1F),
        )
        hogehogeWidget()
}

解説

fillMaxWidth()を持ったRowの中に子要素が二つあり、

Textの大きさが中のStringによって可変するので

Modifier.weight()が無いとoverflowしてTextの横の要素が追い出されてしまう。

そこでModifier.weight()を当てて割合を決めてあげることで

別の要素を追い出すことなく横並びにすることができる。

参考記事

https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).height(androidx.compose.foundation.layout.IntrinsicSize)

https://android--code.blogspot.com/2021/04/jetpack-compose-weight-modifier.html

https://stackoverflow.com/questions/67626002/jetpack-compose-textfield-and-fab-not-using-full-width

http://y-anz-m.blogspot.com/2021/07/jetpack-compose-modifierweight-fill.html

Discussion