คู่มือนี้จะอธิบายวิธีสร้างแถบแอปด้านบนแบบไดนามิกใน "เขียน" ซึ่งจะเปลี่ยนตัวเลือกเมื่อเลือกรายการจากรายการ คุณสามารถแก้ไขชื่อและการดําเนินการของแถบแอปด้านบนตามสถานะการเลือกได้
ใช้ลักษณะการทํางานแบบไดนามิกของแถบแอปด้านบน
โค้ดนี้กำหนดฟังก์ชันคอมโพสิเบิลสำหรับแถบแอปด้านบนที่จะเปลี่ยนแปลงตามการเลือกรายการ
@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
lambda ของ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
อนุญาตให้ทั้งการคลิกและการคลิกค้างไว้สําหรับการเลือกรายการ การคลิกจะดำเนินการต่างๆ ส่วนการคลิกรายการค้างไว้จะเปิด/ปิดสถานะการเลือก