สร้างแถบแอปด้านบนแบบไดนามิก

คู่มือนี้อธิบายวิธีสร้างแถบแอปด้านบนแบบไดนามิกใน 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 Lambda ของ IconButton จะจัดการการดำเนินการแชร์เมื่อคุณคลิกไอคอน

ผลลัพธ์

แถบแอปด้านบนแบบไดนามิกจะแสดงข้อความ &quot;เลือก 3 รายการ&quot; พร้อมไอคอนแชร์ ข้อความและไอคอนนี้จะปรากฏเมื่อเลือกรายการเท่านั้น
รูปที่ 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
                            }
                        )
                )
            }
        }
    }
}

ประเด็นสำคัญเกี่ยวกับโค้ด

  • แถบด้านบนจะอัปเดตตามจำนวนรายการที่คุณเลือก
  • selectedItems มีชุดดัชนีของสินค้าที่เลือก
  • AppBarMultiSelectionExample ใช้ Scaffold เพื่อจัดโครงสร้าง หน้าจอ
    • topBar = { AppBarSelectionActions(selectedItems) } ตั้งค่า AppBarSelectionActions ที่ใช้ร่วมกันได้เป็นแถบแอปด้านบน AppBarSelectionActions ได้รับสถานะ selectedItems
  • LazyColumn จะแสดงรายการในรายการแนวตั้ง โดยแสดงเฉพาะรายการที่มองเห็นได้บนหน้าจอ
  • ListItemSelectable แสดงรายการที่เลือกได้
    • combinedClickable อนุญาตให้จัดการทั้งการคลิกและการคลิกแบบยาวสำหรับการเลือกรายการ การคลิกจะดำเนินการ ส่วนการคลิกรายการค้างไว้จะ สลับสถานะการเลือก

ผลลัพธ์

แถบแอปด้านบนแบบไดนามิกจะแสดงข้อความ &quot;เลือก 3 รายการ&quot; ตามด้วยไอคอนแชร์ ด้านล่างนี้ รายการจะแสดงไอเทมหลายรายการ โดยมีเครื่องหมายถูกข้างไอเทม 3 รายการที่เลือก
รูปที่ 2 รายการที่ผสานรวมกับแถบแอปด้านบนแบบไดนามิกโดยเลือกรายการที่เฉพาะเจาะจง

แหล่งข้อมูลเพิ่มเติม