לחצן בחירה

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

משטח API

כדי להציג את האפשרויות הזמינות, משתמשים בקומפוזבל 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's selectable לנהל את מצב הבחירה ואת התנהגות הנגישות.

התוצאה

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

• ‫Material Design: Buttons