این راهنما نحوه ایجاد یک نوار برنامه بالا پویا در 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
درست باشد، یک نماد اشتراکگذاری بعد از متن ظاهر میشود. - لامبدا
onClick
IconButton
وقتی روی نماد کلیک میشود، عمل اشتراکگذاری را انجام میدهد.
نتیجه
لیست قابل انتخاب را در نوار برنامه بالا پویا ادغام کنید
این مثال نشان می دهد که چگونه می توان یک لیست قابل انتخاب را به نوار برنامه بالا پویا اضافه کرد:
@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
امکان مدیریت کلیک و کلیک طولانی را برای انتخاب آیتم فراهم می کند. یک کلیک یک عمل را انجام می دهد، در حالی که با کلیک طولانی روی یک مورد، وضعیت انتخاب آن تغییر می کند.
-