این راهنما نحوه ایجاد یک نوار برنامه بالا پویا در 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" ) } } }, modifier = modifier ) }
نکات کلیدی در مورد کد
-
AppBarSelectionActionsSetای از فهرست های آیتم انتخاب شده را می پذیرد. -
topBarTextبسته به اینکه آیا مواردی را انتخاب کنید تغییر می کند.- هنگامی که موارد را انتخاب می کنید، متنی که تعداد موارد انتخاب شده را توصیف می کند در
TopAppBarظاهر می شود. - اگر هیچ موردی را انتخاب نکنید،
topBarText"فهرست آیتم ها" است.
- هنگامی که موارد را انتخاب می کنید، متنی که تعداد موارد انتخاب شده را توصیف می کند در
- بلوک
actionsاقداماتی را که در نوار بالای برنامه نمایش میدهید، تعریف میکند. اگرhasSelectionدرست باشد، یک نماد اشتراکگذاری بعد از متن ظاهر میشود. - وقتی روی نماد کلیک میکنید، لامبدا
onClickIconButtonعمل اشتراکگذاری را انجام میدهد.
نتیجه

لیست قابل انتخاب را در نوار برنامه بالا پویا ادغام کنید
این مثال نشان می دهد که چگونه می توان یک لیست قابل انتخاب را به نوار برنامه بالا پویا اضافه کرد:
@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 } ) ) } } } }
نکات کلیدی در مورد کد
- نوار بالا بر اساس تعداد موارد فهرستی که انتخاب می کنید به روز می شود.
-
selectedItemsمجموعه ای از نمایه های آیتم انتخاب شده را نگه می دارد. -
AppBarMultiSelectionExampleاز یکScaffoldبرای ساختار صفحه استفاده می کند.-
topBar = { AppBarSelectionActions(selectedItems) }AppBarSelectionActionsبه عنوان نوار بالای برنامه تنظیم می کند.AppBarSelectionActionsحالتselectedItemsرا دریافت می کند.
-
-
LazyColumnموارد را در یک لیست عمودی نمایش می دهد و فقط موارد را روی صفحه نمایش می دهد. -
ListItemSelectableیک آیتم لیست قابل انتخاب را نشان می دهد.-
combinedClickableامکان مدیریت کلیک و کلیک طولانی را برای انتخاب آیتم فراهم می کند. یک کلیک یک عمل را انجام می دهد، در حالی که با کلیک طولانی روی یک مورد، وضعیت انتخاب آن تغییر می کند.
-
نتیجه
