לחצן בחירה

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

שני לחצני בחירה ללא תוויות. הכפתור הימני נבחר והעיגול מלא כדי לציין את המצב שנבחר. הכפתור הימני לא מלא
איור 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. שלושה לחצני בחירה עם האפשרות 'חברים' מסומנת.

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