分隔線

分隔線是分隔清單或其他項目的細線 容器您可以使用 HorizontalDivider 在應用程式中實作分隔線 和 VerticalDivider 可組合函式

API 介面

這兩個元件都提供可修改外觀的參數:

  • thickness:使用這個參數指定分隔線的粗細 互動
  • color:使用這個參數指定分隔線的顏色。
,瞭解如何調查及移除這項存取權。

水平分隔線範例

以下範例將示範 HorizontalDivider 元件。該字串會使用 thickness 參數控制 線條的高度:

@Composable
fun HorizontalDividerExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        Text("First item in list")
        HorizontalDivider(thickness = 2.dp)
        Text("Second item in list")
    }
}

此實作會在兩個文字元件之間顯示細水平線:

顯示兩個文字項目的 Android 應用程式畫面:「清單中的第一個項目」以及「清單中的第二個項目」中間以細水平線分隔。
圖 1. 分隔兩個文字元件的水平分隔線。

垂直分隔線範例

以下範例將示範 VerticalDivider 元件。該欄位會使用 color 參數來提供 線條的顏色:

@Composable
fun VerticalDividerExample() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Min),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Text("First item in row")
        VerticalDivider(color = MaterialTheme.colorScheme.secondary)
        Text("Second item in row")
    }
}

此實作會在兩個文字元件之間顯示一條細垂直線:

Android 應用程式畫面顯示兩個文字項目:「排第一個項目」和「資料列中的第二個項目」中間以細垂直線分隔。
圖 2. 分隔兩個文字元件的垂直分隔線。

其他資源