กรองรายการขณะพิมพ์

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

คู่มือนี้จะอธิบายวิธีกรองรายการสตริงตามอินพุตข้อความใน Jetpack Compose ใช้แนวทางนี้เพื่ออัปเดตรายการแบบไดนามิกตามคำค้นหาของผู้ใช้

ความเข้ากันได้ของเวอร์ชัน

การใช้งานนี้ใช้ได้กับ Compose เวอร์ชัน 1.2.0 ขึ้นไป

ทรัพยากร Dependency

ใส่ Dependency ต่อไปนี้ใน build.gradle

กรองรายการตามข้อความที่ป้อน

ข้อมูลโค้ดต่อไปนี้จะรวมกันเป็นรายการที่อัปเดตแบบเรียลไทม์เมื่อผู้ใช้พิมพ์ ตัวอย่างนี้ใช้ ViewModel เพื่อเก็บข้อมูลรายการและตรรกะการกรอง ส่วนฟังก์ชัน FilterTextView() จะสร้าง UI ที่อัปเดตโดยอัตโนมัติทุกครั้งที่ข้อความตัวกรองมีการเปลี่ยนแปลง

class FilterTextViewModel : ViewModel() {
    private val items = listOf(
        "Cupcake",
        "Donut",
        "Eclair",
        "Froyo",
        "Gingerbread",
        "Honeycomb",
        "Ice Cream Sandwich"
    )

    private val _filteredItems = MutableStateFlow(items)
    var filteredItems: StateFlow<List<String>> = _filteredItems

    fun filterText(input: String) {
        // This filter returns the full items list when input is an empty string.
        _filteredItems.value = items.filter { it.contains(input, ignoreCase = true) }
    }
}
FilterText.kt

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

• รหัส ViewModel จะแยกการดำเนินการกรองออกจากคอมโพสิเบิล
• ViewModel จะเก็บทั้งรายการต้นฉบับและรายการที่กรอง ซึ่งจะกำหนดรายการและ MutableStateFlow เพื่อเก็บรายการที่กรอง
• ฟังก์ชัน filterText จะกรองรายการตามสตริงอินพุตที่ระบุ และอัปเดตสถานะ filteredItems ซึ่งส่งกลับไปยัง UI

@Composable
fun FilterTextView(modifier: Modifier = Modifier, viewModel: FilterTextViewModel = viewModel()) {
    val filteredItems by viewModel.filteredItems.collectAsStateWithLifecycle()
    var text by rememberSaveable { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(all = 10.dp)
    ) {
        OutlinedTextField(
            value = text,
            onValueChange = {
                text = it
                viewModel.filterText(text)
            },
            label = { Text("Filter Text") },
            modifier = Modifier.fillMaxWidth()
        )

        LazyColumn {
            items(
                count = filteredItems.size,
                key = { index -> filteredItems[index] }
            ) {
                ListItem(
                    headlineContent = { Text(filteredItems[it]) },
                    modifier = Modifier
                        .fillParentMaxWidth()
                        .padding(10.dp)
                )
            }
        }
    }
}
FilterText.kt

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

• แสดง OutlinedTextField สําหรับการป้อนข้อมูลของผู้ใช้ และ LazyColumn เพื่อแสดงรายการที่กรอง
• รวบรวมสถานะ filteredItems จาก ViewModel และแปลงเป็นออบเจ็กต์ State ที่รับรู้วงจร
  • collectAsStateWithLifecycle จะรวบรวมค่าล่าสุดจาก StateFlow และจัดเรียง UI ใหม่เมื่อค่ามีการเปลี่ยนแปลง
• text by rememberSaveable { mutableStateOf("") } สร้างตัวแปรสถานะ textเพื่อเก็บข้อความปัจจุบันที่ป้อนในช่องข้อความตัวกรอง
  • rememberSaveable จะเก็บค่าของข้อความไว้เมื่อมีการทําการเปลี่ยนแปลงการกําหนดค่า
  • คีย์เวิร์ด by จะมอบสิทธิ์ค่าของข้อความให้กับพร็อพเพอร์ตี้ value ของออบเจ็กต์ MutableState
• OutlinedTextField เรียกฟังก์ชัน filterText จากโมเดลมุมมองเมื่อการเปลี่ยนแปลงข้อความทริกเกอร์การเรียกกลับ onValueChange

ผลลัพธ์

คอลเล็กชันที่มีคู่มือนี้

คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้

ขอข้อมูลจากผู้ใช้

ดูวิธีใช้วิธีที่ผู้ใช้โต้ตอบกับแอปของคุณโดยการป้อนข้อความและใช้วิธีป้อนข้อมูลอื่นๆ

คอลเล็กชันคู่มือฉบับย่อ

หากมีคำถามหรือความคิดเห็น

ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคู่มือฉบับย่อหรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ

ไปที่คำถามที่พบบ่อย แสดงความคิดเห็น