دکمه تقسیم بندی شده

از یک دکمه‌ی بخش‌بندی‌شده استفاده کنید تا به کاربران اجازه دهید از بین مجموعه‌ای از گزینه‌ها، در کنار هم، انتخاب کنند. دو نوع دکمه‌ی بخش‌بندی‌شده وجود دارد:

• دکمه تک انتخابی : به کاربران اجازه می‌دهد یک گزینه را انتخاب کنند.
• دکمه انتخاب چندگانه : به کاربران امکان می‌دهد بین دو تا پنج مورد انتخاب کنند. برای انتخاب‌های پیچیده‌تر یا بیش از پنج مورد، از چیپ‌ها استفاده کنید.

سطح API

از طرح‌بندی‌های SingleChoiceSegmentedButtonRow و MultiChoiceSegmentedButtonRow برای ایجاد دکمه‌های بخش‌بندی‌شده استفاده کنید. این طرح‌بندی‌ها SegmentedButton ها را به درستی در موقعیت و اندازه قرار می‌دهند و پارامترهای کلیدی زیر را به اشتراک می‌گذارند:

• space : همپوشانی بین دکمه‌ها را تنظیم می‌کند.
• content : شامل محتوای ردیف دکمه‌های قطعه‌بندی شده است که معمولاً دنباله‌ای از دکمه‌های SegmentedButton ) است.

یک دکمه‌ی قطعه‌بندی‌شده‌ی تک‌گزینه‌ای ایجاد کنید

این مثال نحوه ایجاد یک دکمه‌ی قطعه‌بندی‌شده با تک‌گزینه را نشان می‌دهد:

@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

نکات کلیدی در مورد کد

• با استفاده از remember و mutableIntStateOf یک متغیر selectedIndex را برای ردیابی اندیس دکمه‌ی انتخاب شده، مقداردهی اولیه می‌کند.
• فهرستی از options که نشان‌دهنده‌ی برچسب‌های دکمه هستند را تعریف می‌کند.
• SingleChoiceSegmentedButtonRow به شما امکان می‌دهد فقط یک دکمه را انتخاب کنید.
• برای هر گزینه، درون حلقه forEachIndexed ، یک SegmentedButton ایجاد می‌کند:
  • shape شکل دکمه را بر اساس اندیس آن و تعداد کل گزینه‌ها با استفاده از SegmentedButtonDefaults.itemShape تعریف می‌کند.
  • onClick selectedIndex با اندیس دکمه‌ی کلیک‌شده به‌روزرسانی می‌کند.
  • selected حالت انتخاب دکمه را بر اساس selectedIndex تنظیم می‌کند.
  • label برچسب دکمه را با استفاده از Text composable نمایش می‌دهد.

نتیجه

یک دکمه چند انتخابی چند بخشی ایجاد کنید

این مثال نحوه ایجاد یک دکمه چند گزینه‌ای بخش‌بندی‌شده با آیکون‌ها را نشان می‌دهد که به کاربران امکان انتخاب چندین گزینه را می‌دهد:

@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 شکل دکمه را بر اساس اندیس آن و تعداد کل گزینه‌ها تعریف می‌کند.
  • حالت علامت‌گذاری شده‌ی دکمه را بر اساس مقدار متناظر در selectedOptions تنظیم checked .
  • متد onCheckedChange وضعیت انتخاب‌شده‌ی آیتم مربوطه در selectedOptions را هنگام کلیک روی دکمه، تغییر می‌دهد.
  • icon یک آیکون بر اساس SegmentedButtonDefaults.Icon و حالت تیک خورده‌ی دکمه نمایش می‌دهد.
  • label ، با استفاده از ترکیب‌پذیرهای Icon با بردارهای تصویر مناسب و توضیحات محتوا، نمادی مربوط به برچسب را نمایش می‌دهد.

نتیجه

منابع اضافی

• ماده ۳: دکمه‌های قطعه‌بندی‌شده