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

يشرح هذا الدليل كيفية إنشاء شريط تطبيقات علوي ديناميكي في 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(
                        painter = rememberVectorPainter(AppIcons.Share),
                        contentDescription = "Share items"
                    )
                }
            }
        },
        modifier = modifier
    )
}
AppBar.kt

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

• تقبل السمة AppBarSelectionActions Set من فهارس العناصر المحدّدة.
• يتغيّر topBarText حسب ما إذا كنت تختار أي عناصر.
  • عند اختيار عناصر، يظهر نص يصف عدد العناصر المحدّدة في TopAppBar.
  • إذا لم تختَر أي عناصر، ستكون قيمة topBarText هي "قائمة العناصر".
• تحدّد مجموعة actions الإجراءات التي يتم عرضها في شريط التطبيقات العلوي. إذا كانت قيمة السمة hasSelection صحيحة، سيظهر رمز المشاركة بعد النص.
• تعالج دالة lambda onClick في 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(
        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
                            }
                        )
                )
            }
        }
    }
}
AppBar.kt

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

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

النتيجة

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

مراجع إضافية

• TopAppBar
• LazyColumn
• Scaffold