לחצן בחירה

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

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

ממשק 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 לנהל את מצב הבחירה ואת התנהגות הנגישות.

התוצאה

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

• Material Design: לחצנים