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

Bu kılavuzda, listeden öğeler seçildiğinde seçeneklerini değiştiren dinamik bir üst uygulama çubuğunun Compose'da nasıl oluşturulacağı açıklanmaktadır. Seçim durumuna göre üst uygulama çubuğunun başlığını ve işlemlerini 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ş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(
                        painter = rememberVectorPainter(AppIcons.Share),
                        contentDescription = "Share items"
                    )
                }
            }
        },
        modifier = modifier
    )
}

Kodla ilgili önemli noktalar

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

Sonuç

Dinamik üst uygulama çubuğunda, paylaş simgesiyle birlikte &quot;3 öğe seçildi&quot; metni gösteriliyor. 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ş 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 bir listenin nasıl 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(
        modifier = modifier,
        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
                            }
                        )
                )
            }
        }
    }
}

Kodla ilgili önemli noktalar

  • Üst çubuk, seçtiğiniz liste öğelerinin sayısına göre güncellenir.
  • selectedItems, seçili öğe dizinleri grubunu 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. Tıklama bir işlem gerçekleştirirken bir öğeye 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 bir paylaş simgesi gösteriliyor. Aşağıda, birkaç öğenin yer aldığı bir liste gösteriliyor. Seçilen üç öğenin yanında onay işareti var.
Şekil 2. Belirli öğelerin seçildiği dinamik bir üst uygulama çubuğuna entegre edilmiş liste.

Ek kaynaklar