區隔按鈕

使用分段按鈕，讓使用者從一組選項中並排選擇。分段按鈕分為兩種類型：

  • 單選按鈕：可讓使用者選擇一個選項。
  • 多重選取按鈕：讓使用者選擇兩到五個項目。如果選項較複雜或超過五個項目，請使用方塊。
畫面上會顯示分段按鈕元件。第一個按鈕只允許選取一個項目，第二個按鈕則允許選取多個項目。
圖 1. 單選按鈕 (1) 和多選按鈕 (2)。

API 介面

使用 SingleChoiceSegmentedButtonRow 和 MultiChoiceSegmentedButtonRow 版面配置建立區隔按鈕。這些版面配置可確保 SegmentedButton 正確放置及調整大小，並共用下列重要參數：

  • space：調整按鈕之間的重疊。
  • content：包含區隔按鈕列的內容，通常是 SegmentedButton 的序列。

建立單一選取區隔按鈕

以下範例說明如何建立單一選取的區隔按鈕：

@Composable
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val options = listOf("Day", "Month", "Week")

    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex,
                label = { Text(label) }
            )
        }
    }
}
SegmentedButton.kt

程式碼的重點

  • 使用 remember 和 mutableIntStateOf 初始化 selectedIndex 變數，以追蹤目前選取的按鈕索引。
  • 定義代表按鈕標籤的 options 清單。
  • SingleChoiceSegmentedButtonRow 可確保使用者只能選取一個按鈕。
  • 在 forEachIndexed 迴圈內為每個選項建立 SegmentedButton：
    • shape 會根據索引和使用 SegmentedButtonDefaults.itemShape 的選項總數定義按鈕形狀。
    • onClick 會使用按下按鈕的索引更新 selectedIndex。
    • selected 會根據 selectedIndex 設定按鈕的選取狀態。
    • label 會使用 Text 可組合函式顯示按鈕標籤。

結果

畫面上會顯示包含「日」、「月」和「週」選項的區隔按鈕元件。目前已選取「Day」選項。
圖 2. 單選按鈕，已選取一個選項。

建立多重選取區隔按鈕

本範例說明如何建立多選分段按鈕，並加入可讓使用者選取多個選項的圖示：

@Composable
fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {
    val selectedOptions = remember {
        mutableStateListOf(false, false, false)
    }
    val options = listOf("Walk", "Ride", "Drive")

    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                checked = selectedOptions[index],
                onCheckedChange = {
                    selectedOptions[index] = !selectedOptions[index]
                },
                icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) },
                label = {
                    when (label) {
                        "Walk" -> Icon(
                            imageVector =
                            Icons.AutoMirrored.Filled.DirectionsWalk,
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsBus,
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsCar,
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}
SegmentedButton.kt

程式碼的重點

  • 程式碼會使用 remember 和 mutableStateListOf 初始化 selectedOptions 變數。這會追蹤每個按鈕的所選狀態。
  • 程式碼會使用 MultiChoiceSegmentedButtonRow 來包含按鈕。
  • 在 forEachIndexed 迴圈中，程式碼會為每個選項建立 SegmentedButton：
    • shape 會根據按鈕的索引和選項總數定義按鈕的形狀。
    • checked 會根據 selectedOptions 中的對應值，設定按鈕的勾選狀態。
    • onCheckedChange 會在按下按鈕時，切換 selectedOptions 中對應項目的選取狀態。
    • icon 會根據 SegmentedButtonDefaults.Icon 和按鈕的勾選狀態顯示圖示。
    • label 會使用 Icon 可組合函式，搭配適當的圖片向量和內容說明，顯示與標籤相對應的圖示。

結果

畫面上會顯示含有「步行」、「騎乘」和「開車」選項的區隔式按鈕元件。目前已選取「步行」和「騎乘」選項。
圖 2. 多重選擇區隔按鈕，已選取兩個選項。

其他資源