Divider完全ガイド — HorizontalDivider/VerticalDivider/カスタム区切り線

Source: Dev.to

この記事で学べること

• HorizontalDivider、VerticalDivider、カスタム区切り線、インセットの使い方を解説します。

コード例

HorizontalDivider の基本例

@Composable
fun DividerExamples() {
    Column(Modifier.padding(16.dp)) {
        Text("セクション1", style = MaterialTheme.typography.titleMedium)
        Spacer(Modifier.height(8.dp))
        Text("コンテンツ1")

        HorizontalDivider(Modifier.padding(vertical = 16.dp))

        Text("セクション2", style = MaterialTheme.typography.titleMedium)
        Spacer(Modifier.height(8.dp))
        Text("コンテンツ2")

        // カスタム Divider
        HorizontalDivider(
            modifier = Modifier.padding(vertical = 16.dp),
            thickness = 2.dp,
            color = MaterialTheme.colorScheme.primary
        )

        Text("セクション3")
    }
}

VerticalDivider の例

@Composable
fun VerticalDividerExample() {
    Row(
        Modifier
            .height(IntrinsicSize.Min)
            .padding(16.dp),
        horizontalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        Column(Modifier.weight(1f)) {
            Text("左カラム", fontWeight = FontWeight.Bold)
            Text("左のコンテンツ")
        }

        VerticalDivider(
            modifier = Modifier.fillMaxHeight(),
            thickness = 1.dp,
            color = MaterialTheme.colorScheme.outline
        )

        Column(Modifier.weight(1f)) {
            Text("右カラム", fontWeight = FontWeight.Bold)
            Text("右のコンテンツ")
        }
    }
}

List にインセット付き Divider を入れる例

@Composable
fun ListWithDividers(items: List) {
    LazyColumn {
        itemsIndexed(items) { index, item ->
            ListItem(
                headlineContent = { Text(item) },
                leadingContent = { Icon(Icons.Default.Article, null) }
            )
            if (index < items.lastIndex) {
                HorizontalDivider(
                    modifier = Modifier.padding(start = 56.dp), // インセット
                    color = MaterialTheme.colorScheme.outlineVariant
                )
            }
        }
    }
}

API

• HorizontalDivider はセクション間の区切りに使用
• VerticalDivider はカラム間の区切りに使用
• padding(start = 56.dp) でインセット付き Divider を実現
• outlineVariant 色は目立ちすぎない区切りに適しています

参考リンク

• Surface
• LazyColumn
• Scaffold

テンプレート

8 種類の Android アプリテンプレート（Material 3 UI 対応）を公開しています。
テンプレート一覧 → Gumroad