לחצן בחירה

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

פלטפורמת ה-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.
  • פונקציית ה-onClick lambda מעדכנת את מצב selectedOption לאפשרות שנבחרה כשלוחצים על Row.
  • ‫role = Role.RadioButton מודיע לשירותי הנגישות שהפונקציה Row פועלת כמו לחצן אפשרויות.
• ‫RadioButton(...) יוצר את הרכיב הקומפוזבילי RadioButton.
  • ‫onClick = null ב-RadioButton משפר את הנגישות. כך נמנעת האפשרות של לחצן הבחירה לטפל ישירות באירוע מסוג קליק, ומתאפשר לשינוי Row's selectable לנהל את מצב הבחירה ואת התנהגות הנגישות.

תוצאה

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

• ‫Material Design: Buttons