לחצן בחירה

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

איור 1. זוג לחצני בחירה שבהם אפשרות אחת מסומנת.

ממשק 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(...) יוצר את ה-composable RadioButton.
  • onClick = null ב-RadioButton משפרת את הנגישות. כך אפשר למנוע מלחצן הבחירה לטפל ישירות באירוע הקליק, ולאפשר למשתנה המשנה selectable של Row לנהל את מצב הבחירה ואת התנהגות הנגישות.

התוצאה

איור 2. שלושה לחצני בחירה עם האפשרות 'חברים' מסומנת.

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

• Material Design: לחצנים