לחצן בחירה

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

פלטפורמת ה-API

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

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 משפר את הנגישות. כך נמנעת האפשרות של לחצן הבחירה לטפל ישירות באירוע הקליק, ומתאפשר לשינוי Rowselectable לנהל את מצב הבחירה ואת התנהגות הנגישות.

התוצאה

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

• ‫Material Design: Buttons