לחצן בחירה

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

פלטפורמת ה-API

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

תוצאה

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

• ‫Material Design: Buttons