כפתור מקטעים מאפשר למשתמשים לבחור מתוך קבוצה של אפשרויות שמוצגות זו לצד זו. יש שני סוגים של כפתורים מקוטעים:
- כפתור לבחירה אחת: מאפשר למשתמשים לבחור אפשרות אחת.
- כפתור לבחירה מרובה: מאפשר למשתמשים לבחור בין שניים לחמישה פריטים. לאפשרויות מורכבות יותר, או ליותר מחמישה פריטים, משתמשים בצ'יפים.
פלטפורמת ה-API
כדי ליצור כפתורים מקוטעים, משתמשים בפריסות SingleChoiceSegmentedButtonRow ו-MultiChoiceSegmentedButtonRow. הפריסות האלה ממקמות את SegmentedButtons וקובעות את הגודל שלהם בצורה נכונה, וכוללות את הפרמטרים העיקריים הבאים:
-
space: משנה את החפיפה בין הכפתורים. -
content: מכיל את התוכן של שורת הכפתורים המפוצלת, שבדרך כלל מורכבת מרצף שלSegmentedButton.
יצירת כפתור מקטעים עם בחירה אחת
בדוגמה הזו מוסבר איך ליצור כפתור מקטעים לבחירה יחידה:
@Composable fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) { var selectedIndex by remember { mutableIntStateOf(0) } val options = listOf("Day", "Month", "Week") SingleChoiceSegmentedButtonRow { options.forEachIndexed { index, label -> SegmentedButton( shape = SegmentedButtonDefaults.itemShape( index = index, count = options.size ), onClick = { selectedIndex = index }, selected = index == selectedIndex, label = { Text(label) } ) } } }
מידע חשוב על הקוד
- מאתחל משתנה
selectedIndexבאמצעותrememberו-mutableIntStateOfכדי לעקוב אחרי האינדקס של הכפתור שנבחר. - מגדירה רשימה של
optionsשמייצגים את תוויות הלחצנים. - ב-
SingleChoiceSegmentedButtonRowאפשר לבחור רק כפתור אחד. - יוצר
SegmentedButtonלכל אפשרות, בתוך הלולאהforEachIndexed:shapeמגדיר את צורת הכפתור על סמך האינדקס שלו ומספר האפשרויות הכולל באמצעותSegmentedButtonDefaults.itemShape.- הערך של
onClickמתעדכן ל-selectedIndexעם האינדקס של הכפתור שנלחץ. - הפונקציה
selectedמגדירה את מצב הבחירה של הכפתור על סמךselectedIndex. -
labelמציג את תווית הכפתור באמצעות הקוד הקומפוזביליText.
תוצאה
יצירת כפתור מקטעים עם אפשרות לבחירה מרובה
בדוגמה הבאה מוצג איך ליצור כפתור מקוטע עם כמה אפשרויות וסמלים, שמאפשר למשתמשים לבחור כמה אפשרויות:
@Composable fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) { val selectedOptions = remember { mutableStateListOf(false, false, false) } val options = listOf("Walk", "Ride", "Drive") MultiChoiceSegmentedButtonRow { options.forEachIndexed { index, label -> SegmentedButton( shape = SegmentedButtonDefaults.itemShape( index = index, count = options.size ), checked = selectedOptions[index], onCheckedChange = { selectedOptions[index] = !selectedOptions[index] }, icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) }, label = { when (label) { "Walk" -> Icon( imageVector = Icons.AutoMirrored.Filled.DirectionsWalk, contentDescription = "Directions Walk" ) "Ride" -> Icon( imageVector = Icons.Default.DirectionsBus, contentDescription = "Directions Bus" ) "Drive" -> Icon( imageVector = Icons.Default.DirectionsCar, contentDescription = "Directions Car" ) } } ) } } }
מידע חשוב על הקוד
- הקוד מאתחל את המשתנה
selectedOptionsבאמצעותrememberו-mutableStateListOf. כך אפשר לעקוב אחרי המצב שנבחר לכל כפתור. - הקוד משתמש ב-
MultiChoiceSegmentedButtonRowכדי להכיל את הלחצנים. - בתוך הלולאה
forEachIndexed, הקוד יוצרSegmentedButtonלכל אפשרות:-
shapeמגדיר את צורת הכפתור על סמך האינדקס שלו ומספר האפשרויות הכולל. - המאפיין
checkedמגדיר את מצב הסימון של הכפתור על סמך הערך התואם ב-selectedOptions. -
onCheckedChangeמחליף את מצב הבחירה של הפריט התואם ב-selectedOptionsכשלוחצים על הכפתור. iconמציג סמל על סמךSegmentedButtonDefaults.Iconומצב הסימון של הלחצן.labelמציג סמל שתואם לתווית, באמצעות רכיבים קומפוזביליים מסוגIconעם וקטורים מתאימים של תמונות ותיאורי תוכן.
-
תוצאה
מקורות מידע נוספים
- Material 3: כפתורים מחולקים