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

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

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

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

@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

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

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

النتيجة

الشكل 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
                            }
                        )
                )
            }
        }
    }
}
AppBar.kt

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

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

النتيجة

الشكل 2. قائمة مدمجة في شريط التطبيقات الديناميكي بأعلى الشاشة مع اختيار عناصر معيّنة

مصادر إضافية

• TopAppBar
• LazyColumn
• Scaffold