לחצן מפולח

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

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

משטח API

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

  • ‫space: משנים את החפיפה בין הלחצנים.
  • ‫content: מכיל את התוכן של השורה של הלחצנים המופרדים, שבדרך כלל מורכב מרצף של SegmentedButtons.

יצירת כפתור פילוח עם אפשרות בחירה אחת

בדוגמה הזו מוצג איך ליצור לחצן פילוח עם אפשרות בחירה אחת:

@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 with the clicked button's index.
    • ‫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. לחצן פלח עם אפשרות בחירה מרובה ושתי אפשרויות שנבחרו.

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