یک نوار برنامه بالا پویا ایجاد کنید

این راهنما نحوه ایجاد یک نوار برنامه بالا پویا در 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"
                    )
                }
            }
        },
    )
}
AppBar.kt

نکات کلیدی در مورد کد

• AppBarSelectionActions Set ای از فهرست های آیتم انتخاب شده را می پذیرد.
• topBarText بسته به اینکه آیا مواردی را انتخاب کنید تغییر می کند.
  • هنگامی که موارد را انتخاب می کنید، متنی که تعداد موارد انتخاب شده را توصیف می کند در TopAppBar ظاهر می شود.
  • اگر هیچ موردی را انتخاب نکنید، topBarText "فهرست آیتم ها" است.
• بلوک actions اقداماتی را که در نوار بالای برنامه نمایش می‌دهید، تعریف می‌کند. اگر hasSelection درست باشد، یک نماد اشتراک‌گذاری بعد از متن ظاهر می‌شود.
• وقتی روی نماد کلیک می‌کنید، لامبدا 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(
        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