هنگام تایپ لیست را فیلتر کنید

این راهنما نحوه فیلتر کردن لیست رشته ها را بر اساس ورودی متن در Jetpack Compose توضیح می دهد. از این رویکرد برای به روز رسانی پویا یک لیست بر اساس پرس و جوهای جستجوی کاربر استفاده کنید.

سازگاری نسخه

این پیاده سازی با نسخه های Compose 1.2.0 و بالاتر کار می کند.

وابستگی ها

وابستگی های زیر را در build.gradle خود بگنجانید:

یک لیست را بر اساس ورودی متن فیلتر کنید

تکه‌های زیر با هم فهرستی را تولید می‌کنند که در زمان تایپ کاربر به‌روزرسانی می‌شود. این مثال از ViewModel برای نگهداری داده های لیست و منطق فیلتر کردن استفاده می کند، در حالی که تابع FilterTextView() رابط کاربری ایجاد می کند که هر زمان که متن فیلتر تغییر کند به طور خودکار به روز می شود.

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 انتزاع کار فیلتر کردن را از composable دور می کند.
• 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 را از مدل view فراخوانی می‌کند، زمانی که تغییرات متن باعث پاسخ به تماس onValueChange می‌شود.

نتیجه

مجموعه هایی که حاوی این راهنما هستند

این راهنما بخشی از مجموعه‌های راهنمای Quick Guide است که اهداف توسعه Android گسترده‌تری را پوشش می‌دهد:

درخواست ورودی کاربر

بیاموزید که چگونه با وارد کردن متن و استفاده از سایر ابزارهای ورودی، راه‌هایی را برای تعامل کاربران با برنامه‌تان پیاده‌سازی کنید.

مجموعه راهنمای سریع

سوال یا بازخورد داشته باشید

به صفحه سوالات متداول ما بروید و درباره راهنماهای سریع بیاموزید یا با ما تماس بگیرید و نظرات خود را با ما در میان بگذارید.

به سؤالات متداول بروید بازخورد بگذارید