כדאי להשתמש בלחצן מחולק כדי לאפשר למשתמשים לבחור מתוך קבוצת אפשרויות שמוצגות זו לצד זו. יש שני סוגים של כפתורים עם פלחים:
- לחצן בחירה יחידה: מאפשר למשתמשים לבחור אפשרות אחת.
- לחצן בחירה מרובה: מאפשר למשתמשים לבחור בין שני פריטים לחמישה פריטים. כדי לבחור אפשרויות מורכבות יותר או יותר מחמישה פריטים, משתמשים בצ'יפים.
פלטפורמת ה-API
אפשר להשתמש בפריסות SingleChoiceSegmentedButtonRow ו-MultiChoiceSegmentedButtonRow כדי ליצור לחצנים עם פלחים. הפריסות האלה קובעות את המיקום והגודל של SegmentedButton בצורה נכונה, ומשתפות את הפרמטרים החשובים הבאים:
-
space: משנים את החפיפה בין הלחצנים. -
content: מכיל את התוכן של השורה של הלחצנים המופרדים, שבדרך כלל מורכב מרצף שלSegmentedButtons.
יצירת כפתור פילוח עם אפשרות בחירה אחת
בדוגמה הזו מוצג איך ליצור לחצן פילוח עם אפשרות בחירה אחת:
@Composable fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) { var selectedIndex by remember { mutableIntStateOf(0) } val options = listOf("Day", "Month", "Week") SingleChoiceSegmentedButtonRow { options.f>orEachIndexed { index, label - SegmentedButton( shape = SegmentedButtonDefaults.itemShape( index = index, count = options.size ), onClick = { selectedIndex = index }, selected = index == selectedIndex, label = { Text(label) } } } }SegmentedButton.kt
מידע חשוב על הקוד
- מאתחלים את המשתנה
selectedIndexבאמצעותrememberו-mutableIntStateOfכדי לעקוב אחרי האינדקס של הלחצן שנבחר. - מגדירה רשימה של
optionsשמייצגת את תוויות הלחצנים. SingleChoiceSegmentedButtonRowמאפשר לבחור רק לחצן אחד.- יוצרת
SegmentedButtonלכל אפשרות, בתוךforEachIndexedהלולאה:-
shapeמגדיר את צורת הלחצן על סמך האינדקס שלו והספירה הכוללת של האפשרויות באמצעותSegmentedButtonDefaults.itemShape. -
onClickupdatesselectedIndexwith the clicked button's index. -
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.f>orEachIndexed { 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" } } ) } } }SegmentedButton.kt
מידע חשוב על הקוד
- הקוד מאתחל את המשתנה
selectedOptionsבאמצעותrememberו-mutableStateListOf. המאפיין הזה עוקב אחרי המצב הנבחר של כל לחצן. - הקוד משתמש בתג
MultiChoiceSegmentedButtonRowכדי להכיל את הלחצנים. - בתוך לולאת
forEachIndexed, הקוד יוצרSegmentedButtonלכל אפשרות:-
shapeמגדיר את צורת הלחצן על סמך האינדקס שלו והמספר הכולל של האפשרויות. -
checkedמגדיר את מצב הסימון של הלחצן על סמך הערך התואם ב-selectedOptions. -
onCheckedChangeמעביר את הפריט התואם ב-selectedOptionsלמצב שנבחר או למצב לא נבחר כשלוחצים על הלחצן. -
iconמציג סמל על סמךSegmentedButtonDefaults.Iconוהמצב המסומן של הלחצן. -
labelמציג סמל שמתאים לתווית, באמצעות קומפוזבילים שלIconעם וקטורים מתאימים של תמונות ותיאורי תוכן.
-
התוצאה
מקורות מידע נוספים
- Material 3: כפתורים מפולחים