לחצן מפולח

אפשר להשתמש בלחצן מפולח כדי לאפשר למשתמשים לבחור מתוך קבוצת אפשרויות, זו לצד זו. יש שני סוגים של לחצנים מחולקים:

• לחצן לבחירה יחידה: מאפשר למשתמשים לבחור אפשרות אחת.
• לחצן לבחירה בכמה פריטים: מאפשר למשתמשים לבחור בין שניים לחמישה פריטים. אם יש לכם אפשרויות מורכבות יותר או יותר מחמישה פריטים, תוכלו להשתמש בצ'יפים.

איור 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

נקודות עיקריות לגבי הקוד

• הפונקציה מאתחלת את המשתנה selectedIndex באמצעות remember ו-mutableIntStateOf כדי לעקוב אחרי אינדקס הלחצן שנבחר כרגע.
• הגדרת רשימה של options שמייצגת את תוויות הלחצנים.
• SingleChoiceSegmentedButtonRow מוודא שאפשר לבחור רק לחצן אחד.
• יצירת SegmentedButton לכל אפשרות, בתוך הלולאה forEachIndexed:
  • shape מגדיר את צורת הלחצן על סמך המדד שלו ומספר האפשרויות הכולל באמצעות SegmentedButtonDefaults.itemShape.
  • onClick מעדכן את selectedIndex במספר האינדקס של הלחצן שנלחץ עליו.
  • selected מגדיר את מצב הבחירה של הלחצן על סמך selectedIndex.
  • label מציג את תווית הלחצן באמצעות הרכיב הקומפוזבילי Text.

התוצאה

איור 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

נקודות עיקריות לגבי הקוד

• הקוד מאתחלל את המשתנה selectedOptions באמצעות remember ו-mutableStateListOf. כך אפשר לעקוב אחרי המצב שנבחר בכל לחצן.
• הקוד משתמש ב-MultiChoiceSegmentedButtonRow כדי להכיל את הלחצנים.
• בתוך הלולאה forEachIndexed, הקוד יוצר SegmentedButton לכל אפשרות:
  • shape מגדיר את צורת הלחצן על סמך האינדקס שלו ומספר האפשרויות הכולל.
  • checked מגדיר את מצב הסימון של הלחצן על סמך הערך התואם ב-selectedOptions.
  • לחיצה על onCheckedChange משנה את המצב שנבחר של הפריט התואם ב-selectedOptions.
  • ב-icon מוצג סמל על סמך SegmentedButtonDefaults.Icon ועל סמך מצב הסימון של הלחצן.
  • label מציג סמל התואם לתווית, באמצעות רכיבים קומפוזביליים מסוג Icon עם וקטורים של תמונות ותיאורי תוכן מתאימים.

התוצאה

איור 2. לחצן מפולח לבחירה מרובה עם שתי אפשרויות שנבחרו.

מקורות מידע נוספים

• חומר 3: לחצנים מופרדים לפי פלחים