לחצן מפולח

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

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

איור 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: לחצנים מופרדים לפי פלחים