Dinamik bir üst uygulama çubuğu oluşturma

Bu kılavuzda, Compose'da listeden öğeler seçildiğinde seçenekleri değişen dinamik bir üst uygulama çubuğunun nasıl oluşturulacağı açıklanmaktadır. Üst uygulama çubuğunun başlığını ve işlemlerini seçim durumuna göre değiştirebilirsiniz.

Dinamik üst uygulama çubuğu davranışını uygulama

Bu kod, öğe seçimine göre değişen üst uygulama çubuğu için bir composable işlevi tanımlar:

@Composable
fun AppBarSelectionActions(
    selectedItems: Set<Int>,
    modifier: Modifier = Modifier,
) {
    val hasSelection = selectedItems.isNotEmpty()
    val topBarText = if (hasSelection) {
        "Selected ${selectedItems.size} items"
    } else {
        "List of items"
    }

    TopAppBar(
        title = {
            Text(topBarText)
        },
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer,
            titleContentColor = MaterialTheme.colorScheme.primary,
        ),
        actions = {
            if (hasSelection) {
                IconButton(onClick = {
                    /* click action */
                }) {
                    Icon(
                        imageVector = Icons.Filled.Share,
                        contentDescription = "Share items"
                    )
                }
            }
        },
    )
}
AppBar.kt

Kodla ilgili önemli noktalar

  • AppBarSelectionActions, seçilen öğe dizinlerinin Set değerini kabul eder.
  • topBarText, herhangi bir öğe seçip seçmemenize bağlı olarak değişir.
    • Öğeleri seçtiğinizde, seçilen öğe sayısını açıklayan metin TopAppBar içinde gösterilir.
    • Hiçbir öğe seçmezseniz topBarText "Öğe listesi" olur.
  • actions bloğu, üst uygulama çubuğunda gösterdiğiniz işlemleri tanımlar. hasSelection doğruysa metnin ardından paylaş simgesi görünür.
  • IconButton lambda'sı, simgeyi tıkladığınızda paylaşma işlemini gerçekleştirir.onClick

Sonuç

Dinamik üst uygulama çubuğunda, paylaşım simgesiyle birlikte 3 öğe seçildi metni gösteriliyor. Bu metin ve simge yalnızca öğeler seçildiğinde görünür.
1. şekil. Yalnızca öğeler seçildiğinde görünen metin ve paylaşma simgesi içeren dinamik bir üst uygulama çubuğu.

Seçilebilir listeyi dinamik üst uygulama çubuğuna entegre etme

Bu örnekte, dinamik üst uygulama çubuğuna seçilebilir liste ekleme gösterilmektedir:

@Composable
private fun AppBarMultiSelectionExample(
    modifier: Modifier = Modifier,
) {
    val listItems by remember { mutableStateOf(listOf(1, 2, 3, 4, 5, 6)) }
    var selectedItems by rememberSaveable { mutableStateOf(setOf<Int>()) }

    Scaffold(
        topBar = { AppBarSelectionActions(selectedItems) }
    ) { innerPadding ->
        LazyColumn(contentPadding = innerPadding) {
            itemsIndexed(listItems) { _, index ->
                val isItemSelected = selectedItems.contains(index)
                ListItemSelectable(
                    selected = isItemSelected,
                    Modifier
                        .combinedClickable(
                            interactionSource = remember { MutableInteractionSource() },
                            indication = null,
                            onClick = {
                                /* click action */
                            },
                            onLongClick = {
                                if (isItemSelected) selectedItems -= index else selectedItems += index
                            }
                        )
                )
            }
        }
    }
}
AppBar.kt

Kodla ilgili önemli noktalar

  • Üst çubuk, kaç liste öğesi seçtiğinize göre güncellenir.
  • selectedItems, seçilen öğe dizinleri kümesini içerir.
  • AppBarMultiSelectionExample, ekranı yapılandırmak için Scaffold kullanır.
    • topBar = { AppBarSelectionActions(selectedItems) }, AppBarSelectionActions composable'ı üst uygulama çubuğu olarak ayarlar. AppBarSelectionActions, selectedItems durumunu alır.
  • LazyColumn, öğeleri dikey bir listede gösterir ve yalnızca ekranda görünen öğeleri oluşturur.
  • ListItemSelectable, seçilebilir bir liste öğesini temsil eder.
    • combinedClickable, öğe seçimi için hem tıklama hem de uzun tıklama işlemlerine izin verir. Tıklama işlemi gerçekleştirirken bir öğeyi uzun tıklama, öğenin seçim durumunu değiştirir.

Sonuç

Dinamik üst uygulama çubuğunda, &quot;3 öğe seçildi&quot; metni ve ardından paylaşma simgesi gösteriliyor. Aşağıdaki listede, seçilen üç öğenin yanında onay işaretleri bulunan birkaç öğe gösteriliyor.
Şekil 2. Belirli öğelerin seçildiği dinamik bir üst uygulama çubuğuna entegre edilmiş liste.

Ek kaynaklar