לחצן מפולח

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

  • לחצן בחירה יחידה: מאפשר למשתמשים לבחור אפשרות אחת.
  • לחצן בחירה מרובה: מאפשר למשתמשים לבחור בין שני פריטים לחמישה פריטים. כדי לבחור אפשרויות מורכבות יותר או יותר מחמישה פריטים, משתמשים בצ'יפים.
מוצג רכיב של כפתור מפולח. הלחצן הראשון מאפשר בחירה אחת, והלחצן השני מאפשר בחירות מרובות.
איור 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 updates 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 עם וקטורים מתאימים של תמונות ותיאורי תוכן.

התוצאה

מוצג רכיב של כפתור מפולח עם האפשרויות 'הליכה', 'נסיעה' ו'נהיגה'. אפשרויות ההליכה והנסיעה מסומנות כרגע.
איור 3. לחצן פלחים עם אפשרות בחירה מרובה, שבו נבחרו שתי אפשרויות.

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