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

Bu kılavuzda, Oluştur'da listeden öğe seçildiğinde seçeneklerini değiştiren 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, üst uygulama çubuğu için öğe seçimine göre değişen bir birleştirilebilir işlev 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çili öğe dizinlerinin Set değerini kabul eder.
  • topBarText, herhangi bir öğenin seçilip seçilmediğine bağlı olarak değişir.
    • Öğeler seçildiğinde, seçilen öğe sayısını açıklayan metin TopAppBar içinde görünür.
    • Hiçbir öğe seçilmemişse topBarText "Öğelerin listesi" olur.
  • actions bloğu, üst uygulama çubuğunda görüntülenen işlemleri tanımlar. hasSelection doğruysa metnin ardından bir paylaşma simgesi görünür.
  • IconButton öğesinin onClick lambdası, simge tıklandığında paylaşım işlemini yönetir.

Sonuç

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

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

Bu örnekte, dinamik bir üst uygulama çubuğuna nasıl seçilebilir liste ekleneceği 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, seçilen liste öğelerinin sayısına göre güncellenir.
  • selectedItems, seçilen öğe dizini kümesini içerir.
  • AppBarMultiSelectionExample, ekranı yapılandırmak için Scaffold kullanır.
    • topBar = { AppBarSelectionActions(selectedItems) } AppBarSelectionActions bileşenini ü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 olanak tanır. Bir öğeyi tıkladığınızda işlem yapılır, öğeyi uzun tıkladığınızda ise seçim durumu açılır veya kapatılır.

Sonuç

Dinamik bir üst uygulama çubuğunda, 3 öğe seçildi metninin ardından bir paylaşma simgesi gösterilir. Aşağıda, seçili olan üç öğenin yanında onay işareti bulunan çeşitli öğeler gösterilmektedir.
Şekil 2. Belirli öğelerin seçili olduğu dinamik bir üst uygulama çubuğuna entegre edilmiş bir liste.

Ek kaynaklar