סינון רשימה בזמן ההקלדה

במדריך הזה נסביר איך לסנן רשימה של מחרוזות על סמך קלט טקסט ב-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 מספק ניתוח תיאורטי של עבודת הסינון, מחוץ לרכיב הניתן ליצירה.
• המאפיין 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:

בקשה להזנת משתמש

איך מטמיעים דרכים שבהן המשתמשים יכולים לבצע פעולות באפליקציה באמצעות הזנת טקסט או באמצעות אמצעי קלט אחרים.

אוסף מדריכים מהירים

יש לכם שאלות או משוב

אתם יכולים להיכנס לדף השאלות הנפוצות שלנו ולקרוא מדריכים מהירים, או ליצור איתנו קשר ולספר לנו מה דעתכם.

לשאלות נפוצות שליחת משוב