MENU

【Jetpack Compose】Divider Composableの使い方 | 区切り線をつける

記事内に商品プロモーションが含まれる場合があります

DividerコンポーザブルはUI要素間に区切り線を追加するために使用されます。

目次

基本的な使い方

Divider(
   color = Color.Gray, // 区切り線の色 
   thickness = 1.dp // 線の太さ
)

簡単な例として、縦に並んだ複数のテキスト要素をDividerで分割してみます。

@Composable
fun MyComposable() {
    Column(
        modifier = Modifier.fillMaxSize().padding(16.dp)
    ) {
        Text(text = "Item 1")
        Divider(color = Color.Gray, thickness = 1.dp) // Dividerを追加
        Text(text = "Item 2")
        Divider(color = Color.Gray, thickness = 1.dp) // Dividerを追加
        Text(text = "Item 3")
    }
}

各テキスト要素を分割できました。

Share

Comment

コメントする

目次