לחצן מפולח

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

  • כפתור לבחירה אחת: מאפשר למשתמשים לבחור אפשרות אחת.
  • כפתור לבחירה מרובה: מאפשר למשתמשים לבחור בין שניים לחמישה פריטים. לאפשרויות מורכבות יותר, או ליותר מחמישה פריטים, משתמשים בצ'יפים.
מוצג רכיב של כפתור מקטעים. הכפתור הראשון מאפשר בחירה אחת, והכפתור השני מאפשר כמה בחירות.
איור 1. כפתור לבחירה של פריט אחד (1) וכפתור לבחירה של כמה פריטים (2).

פלטפורמת ה-API

כדי ליצור כפתורים מקוטעים, משתמשים בפריסות SingleChoiceSegmentedButtonRow ו-MultiChoiceSegmentedButtonRow. הפריסות האלה ממקמות את SegmentedButtons וקובעות את הגודל שלהם בצורה נכונה, וכוללות את הפרמטרים העיקריים הבאים:

  • ‫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) }
            )
        }
    }
}

מידע חשוב על הקוד

  • מאתחל משתנה 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"
                        )
                    }
                }
            )
        }
    }
}

מידע חשוב על הקוד

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

תוצאה

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

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