إنشاء شريط تطبيق ديناميكي في أعلى الشاشة

يوضّح هذا الدليل كيفية إنشاء شريط تطبيق علوي ديناميكي في Compose يغيّر خياراته عند اختيار عناصر من القائمة. يمكنك تعديل عنوان شريط التطبيق العلوي والإجراءات استنادًا إلى حالة التحديد.

تنفيذ سلوك شريط التطبيق العلوي الديناميكي

يحدّد هذا الرمز دالة قابلة للإنشاء لشريط التطبيق العلوي تتغيّر استنادًا إلى اختيار العنصر:

@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"
                    )
                }
            }
        },
    )
}

النقاط الرئيسية حول الرمز

  • يقبل AppBarSelectionActions Set لفهارس العناصر المحدّدة.
  • يتغيّر topBarText حسب ما إذا كنت قد اخترت أي عناصر.
    • عند اختيار عناصر، يظهر نص يصف عدد العناصر المحدّدة في TopAppBar.
    • إذا لم تحدّد أي عناصر، ستكون topBarText هي "قائمة العناصر".
  • يحدّد البلوك actions الإجراءات التي تعرضها في شريط التطبيق العلوي. إذا كانت قيمة hasSelection هي true، سيظهر رمز المشاركة بعد النص.
  • يتعامل onClick lambda الخاص بـ IconButton مع إجراء المشاركة عند النقر على الرمز.

النتيجة

يعرض شريط التطبيق العلوي الديناميكي النص &quot;تم اختيار 3 عناصر&quot; مع رمز المشاركة. لا يظهر هذا النص والرمز إلا عند اختيار عناصر.
الشكل 1. شريط تطبيق علوي ديناميكي يتضمّن نصًا ورمز مشاركة لا يظهران إلا عند تحديد عناصر

دمج قائمة قابلة للاختيار في شريط التطبيق العلوي الديناميكي

يوضّح هذا المثال كيفية إضافة قائمة قابلة للتحديد إلى شريط تطبيق علوي ديناميكي:

@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
                            }
                        )
                )
            }
        }
    }
}

النقاط الرئيسية حول الرمز

  • يتم تعديل الشريط العلوي استنادًا إلى عدد عناصر القائمة التي تختارها.
  • يحتوي selectedItems على مجموعة فهارس العناصر المحدّدة.
  • تستخدم AppBarMultiSelectionExample Scaffold لتنظيم الشاشة.
    • يضبط topBar = { AppBarSelectionActions(selectedItems) } العنصر القابل للإنشاء AppBarSelectionActions كشريط التطبيق العلوي. يتلقّى AppBarSelectionActions حالة selectedItems.
  • تعرض LazyColumn العناصر في قائمة عمودية، ولا تعرض سوى العناصر المرئية على الشاشة.
  • يمثّل ListItemSelectable عنصر قائمة قابلاً للاختيار.
    • تسمح السمة combinedClickable بالتعامل مع كل من النقر والنقر مع الاستمرار لاختيار العناصر. يؤدي النقر إلى تنفيذ إجراء، بينما يؤدي النقر مع الاستمرار على عنصر إلى تبديل حالة اختياره.

النتيجة

يعرض شريط التطبيق العلوي الديناميكي النص &quot;تم اختيار 3 عناصر&quot;، يليه رمز المشاركة. في ما يلي، تعرض قائمة عدة عناصر، مع علامات اختيار بجانب العناصر الثلاثة المحدّدة
الشكل 2. قائمة مدمجة في شريط تطبيق ديناميكي علوي مع تحديد عناصر معيّنة

مراجع إضافية