לחצן בחירה

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

איור 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: לחצנים