این راهنما توضیح میدهد که چگونه در 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 ) }
نکات کلیدی درباره کد
-
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( 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امکان مدیریت کلیک و کلیک طولانی را برای انتخاب مورد فراهم میکند. کلیک کردن کنشی را انجام میدهد، درحالیکه کلیک طولانی روی یک مورد وضعیت انتخاب آن را تغییر میدهد.
نتیجه