לחצן בחירה

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

איור 1. שני כפתורי בחירה, כשאחד מהם מסומן.

פלטפורמת ה-API

משתמשים ב-composable‏ RadioButton כדי להציג את האפשרויות הזמינות. כדי לקבץ את האפשרויות, צריך להוסיף לכל אפשרות של RadioButton והתווית שלה רכיב Row.

‫RadioButton כולל את הפרמטרים העיקריים הבאים:

• selected: מציין אם כפתור הבחירה מסומן.
• ‫onClick: פונקציית lambda שהאפליקציה מפעילה כשהמשתמש לוחץ על כפתור הבחירה. אם הערך הוא null, המשתמש לא יכול לקיים אינטראקציה ישירה עם כפתור הבחירה.
• ‫enabled: קובע אם כפתור הבחירה מופעל או מושבת. המשתמשים לא יכולים לבצע פעולות בכפתורי בחירה מושבתים.
• ‫interactionSource: מאפשר לראות את מצב האינטראקציה של הכפתור, למשל אם לחצו עליו, העבירו מעליו את העכבר או התמקדו בו.

יצירת כפתור בחירה בסיסי

קטע הקוד הבא מציג רשימה של כפתורי בחירה בתוך Column:

@Composable
fun RadioButtonSingleSelection(modifier: Modifier = Modifier) {
    val radioOptions = listOf("Calls", "Missed", "Friends")
    val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }
    // Note that Modifier.selectableGroup() is essential to ensure correct accessibility behavior
    Column(modifier.selectableGroup()) {
        radioOptions.forEach { text ->
            Row(
                Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .selectable(
                        selected = (text == selectedOption),
                        onClick = { onOptionSelected(text) },
                        role = Role.RadioButton
                    )
                    .padding(horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                RadioButton(
                    selected = (text == selectedOption),
                    onClick = null // null recommended for accessibility with screen readers
                )
                Text(
                    text = text,
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.padding(start = 16.dp)
                )
            }
        }
    }
}
RadioButton.kt

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

• ‫radioOptions מייצג את התוויות של כפתורי הבחירה.
• הפונקציה הקומפוזבילית remember יוצרת משתנה מצב selectedOption ופונקציה לעדכון המצב הזה שנקראת onOptionSelected. המצב הזה מכיל את האפשרות שנבחרה בכפתור הבחירה.
  • ‫mutableStateOf(radioOptions[0]) מאתחל את המצב לפריט הראשון ברשימה. "שיחות" הוא הפריט הראשון, ולכן כפתור הבחירה שלו מסומן כברירת מחדל.
• Modifier.selectableGroup() מבטיח התנהגות נגישות תקינה לקוראי מסך. הוא מודיע למערכת שהרכיבים בתוך ה-Column הזה הם חלק מקבוצה שניתן לבחור, מה שמאפשר תמיכה תקינה בקורא מסך.
• Modifier.selectable() גורם לכל ה-Row לפעול כפריט אחד שניתן לבחירה.
  • השדה selected מציין אם הערך הנוכחי של Row נבחר על סמך המצב של selectedOption.
  • פונקציית ה-lambda של onClick מעדכנת את המצב של selectedOption לאפשרות שנבחרה כשלוחצים על Row.
  • role = Role.RadioButton מודיע לשירותי הנגישות שהרכיב Row מתפקד ככפתור בחירה.
• ‫RadioButton(...) יוצר את הרכיב הקומפוזבילי RadioButton.
  • ‫onClick = null ב-RadioButton משפר את הנגישות. כך כפתור הבחירה לא מטפל באירוע מסוג קליק באופן ישיר, והמשתנה של Row, selectable, יכול לנהל את מצב הבחירה ואת התנהגות הנגישות.

תוצאה

איור 2. שלושה כפתורי בחירה, כשהאפשרות "חברים" מסומנת.

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

• ‫Material Design: כפתורים