فلترة قائمة أثناء الكتابة

يوضّح هذا الدليل كيفية الفلترة من خلال قائمة سلاسل استنادًا إلى إدخال النص في Jetpack Compose. استخدِم هذه الطريقة لتعديل قائمة ديناميكيًا استنادًا إلى طلبات بحث المستخدِم.

توافق الإصدار

يعمل هذا التنفيذ مع الإصدار 1.2.0 من تطبيق Compose والإصدارات الأحدث.

التبعيات

أدرِج التبعيات التالية في 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 نموذجًا مجردًا لعملية الفلترة بعيدًا عن العنصر القابل للتجميع.
• تحتوي القائمة ViewModel على كلّ من القائمة الأصلية والقائمة التي تمت فلترتها. ويحدّد قائمة بالعناصر وMutableStateFlow لتضمين العناصر التي تمّت فلترتها.
• تصفِّر الدالة filterText القائمة استنادًا إلى سلسلة الإدخال المقدَّمة وتُعدِّل حالة filteredItems التي يتم تمريرها مرة أخرى إلى واجهة المستخدم.

@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 ويعيد إنشاء واجهة المستخدم عند تغيُّر القيمة.
• text by rememberSaveable { mutableStateOf("") } لإنشاء متغيّر حالة text لتخزين النص الحالي الذي تم إدخاله في حقل نص الفلتر.
  • تحافظ rememberSaveable على قيمة النص في جميع تغييرات الضبط.
  • تفوض الكلمة الرئيسية by قيمة النص إلى سمة value للكائن MutableState.
• تستدعي OutlinedTextField الدالة filterText من نموذج العرض عندما يؤدي تغيير النص إلى تنشيط دالة ردّ الاتصال onValueChange.

النتيجة

المجموعات التي تتضمّن هذا الدليل

هذا الدليل هو جزء من مجموعات الأدلة السريعة المنظَّمة التي تتناول أهداف تطوير Android الأوسع نطاقًا:

طلب إدخال المستخدم

تعرَّف على كيفية توفير طرق للمستخدمين للتفاعل مع تطبيقك من خلال إدخال نص واستخدام وسائل إدخال أخرى.

مجموعة الأدلة السريعة

إذا كانت لديك أسئلة أو ملاحظات

يمكنك الانتقال إلى صفحة الأسئلة الشائعة والاطّلاع على الأدلة السريعة أو التواصل معنا وإعلامنا برأيك.

الانتقال إلى الأسئلة الشائعة تقديم ملاحظات