खोज बार

खोज की सुविधा लागू करने के लिए, खोज बार का इस्तेमाल करें. सर्च बार, खोज के लिए हमेशा उपलब्ध रहने वाला फ़ील्ड होता है. इसकी मदद से, उपयोगकर्ता आपके ऐप्लिकेशन में काम के नतीजे देखने के लिए, कोई कीवर्ड या वाक्यांश डाल सकते हैं. अगर आपके ऐप्लिकेशन का मुख्य फ़ोकस खोज पर है, तो सर्च बार का इस्तेमाल करने का सुझाव दिया जाता है.

दो खोज बार दिखाए गए हैं. बाईं ओर मौजूद फ़ॉर्म में सिर्फ़ एक टेक्स्ट फ़ील्ड है.
  दाईं ओर मौजूद सर्च बार में एक टेक्स्ट फ़ील्ड है. इसके नीचे खोज के लिए सुझाव दिया गया है.
पहली इमेज. एक सामान्य सर्च बार (1) और सुझाव वाला सर्च बार (2).

एपीआई सरफ़ेस

खोज बार लागू करने के लिए, SearchBar कंपोज़ेबल का इस्तेमाल करें. इस कंपोज़ेबल के मुख्य पैरामीटर में ये शामिल हैं:

  • inputField: इससे खोज बार के इनपुट फ़ील्ड के बारे में पता चलता है. आम तौर पर, यह SearchBarDefaults.InputField का इस्तेमाल करता है. इससे इन चीज़ों को अपनी पसंद के मुताबिक बनाया जा सकता है:
    • query: क्वेरी का वह टेक्स्ट जिसे इनपुट फ़ील्ड में दिखाना है.
    • onQueryChange: क्वेरी स्ट्रिंग में हुए बदलावों को मैनेज करने के लिए Lambda.
  • expanded: यह बूलियन वैल्यू है. इससे पता चलता है कि खोज बार को सुझाव दिखाने या फ़िल्टर किए गए नतीजे दिखाने के लिए बड़ा किया गया है या नहीं.
  • onExpandedChange: ड्रॉपडाउन के बड़े किए गए स्टेटस में बदलावों को मैनेज करने के लिए Lambda.

  • content: इस सर्च बार का कॉन्टेंट, inputField के नीचे खोज के नतीजे दिखाने के लिए होता है.

इस स्निपेट में, सुझावों के साथ SearchBar को बुनियादी तौर पर लागू करने का तरीका दिखाया गया है:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SimpleSearchBar(
    textFieldState: TextFieldState,
    onSearch: (String) -> Unit,
    searchResults: List<String>,
    modifier: Modifier = Modifier
) {
    // Controls expansion state of the search bar
    var expanded by rememberSaveable { mutableStateOf(false) }

    Box(
        modifier
            .fillMaxSize()
            .semantics { isTraversalGroup = true }
    ) {
        SearchBar(
            modifier = Modifier
                .align(Alignment.TopCenter)
                .semantics { traversalIndex = 0f },
            inputField = {
                SearchBarDefaults.InputField(
                    query = textFieldState.text.toString(),
                    onQueryChange = { textFieldState.edit { replace(0, length, it) } },
                    onSearch = {
                        onSearch(textFieldState.text.toString())
                        expanded = false
                    },
                    expanded = expanded,
                    onExpandedChange = { expanded = it },
                    placeholder = { Text("Search") }
                )
            },
            expanded = expanded,
            onExpandedChange = { expanded = it },
        ) {
            // Display search results in a scrollable column
            Column(Modifier.verticalScroll(rememberScrollState())) {
                searchResults.forEach { result ->
                    ListItem(
                        headlineContent = { Text(result) },
                        modifier = Modifier
                            .clickable {
                                textFieldState.edit { replace(0, length, result) }
                                expanded = false
                            }
                            .fillMaxWidth()
                    )
                }
            }
        }
    }
}

कोड के बारे में अहम बातें

  • rememberSaveable यह पक्का करता है कि कॉन्फ़िगरेशन में होने वाले बदलावों के दौरान, सर्च बार के बड़े या छोटे होने की स्थिति बनी रहे. यह कॉन्फ़िगरेशन में बदलाव के दौरान, ऐक्टिविटी के बंद होने से पहले, याद रखी गई वैल्यू को होस्टिंग ऐक्टिविटी के savedInstanceState बंडल में लिखता है.
  • semantics मॉडिफ़ायर, TalkBack के ट्रैवर्सल ऑर्डर को कंट्रोल करता है.
    • Box को isTraversalGroup के लिए सेट किया गया है, ताकि इसके सभी चाइल्ड कंपोज़ेबल को ग्रुप किया जा सके.
    • traversalIndex को सेट किया जाता है, ताकि यह तय किया जा सके कि TalkBack, ग्रुप के हर सदस्य की सुलभता से जुड़ी जानकारी को किस क्रम में पढ़ेगा. TalkBack, 1 जैसी पॉज़िटिव वैल्यू वाले पियर से पहले, -1 जैसी नेगेटिव वैल्यू वाले पियर की ऐक्सेसिबिलिटी की जानकारी पढ़ता है. वैल्यू फ़्लोट होने की वजह से, कई पीयर के लिए कस्टम ऑर्डर तय किया जा सकता है. इसके लिए, हर पीयर पर -1.0 और 1.0 के बीच की वैल्यू सेट करें.
  • SearchBar में, उपयोगकर्ता के इनपुट के लिए inputField और खोज के सुझाव दिखाने के लिए Column शामिल होता है.
    • SearchBarDefaults.InputField, इनपुट फ़ील्ड बनाता है और उपयोगकर्ता की क्वेरी में होने वाले बदलावों को मैनेज करता है.
    • onQueryChange, टेक्स्ट इनपुट को मैनेज करता है. साथ ही, इनपुट फ़ील्ड में टेक्स्ट बदलने पर स्थिति को अपडेट करता है.
    • expanded की स्थिति से, सुझावों की सूची के दिखने की स्थिति को कंट्रोल किया जाता है.
  • searchResults.forEach { result -> … }, searchResults सूची में मौजूद हर आइटम के लिए कार्रवाई को दोहराता है और हर नतीजे के लिए ListItem बनाता है.
    • ListItem पर क्लिक करने से, textFieldState अपडेट हो जाता है, खोज बार छोटा हो जाता है, और textField में खोज के चुने गए नतीजे दिखते हैं.

नतीजा

खोज बार में &#39;a&#39; टाइप किया गया है. खोज बार के नीचे, खोज के छह सुझावों वाली सूची दिखाई गई है.
दूसरी इमेज. सुझावों के साथ खोज बार दिखाया गया है.

फ़िल्टर की गई सूची के साथ खोज बार

इस उदाहरण में, SearchBar दिखाया गया है. यह उपयोगकर्ता की खोज क्वेरी के आधार पर सूची को फ़िल्टर करता है:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomizableSearchBar(
    query: String,
    onQueryChange: (String) -> Unit,
    onSearch: (String) -> Unit,
    searchResults: List<String>,
    onResultClick: (String) -> Unit,
    modifier: Modifier = Modifier,
    // Customization options
    placeholder: @Composable () -> Unit = { Text("Search") },
    leadingIcon: @Composable (() -> Unit)? = { Icon(Icons.Default.Search, contentDescription = "Search") },
    trailingIcon: @Composable (() -> Unit)? = null,
    supportingContent: (@Composable (String) -> Unit)? = null,
    leadingContent: (@Composable () -> Unit)? = null,
) {
    // Track expanded state of search bar
    var expanded by rememberSaveable { mutableStateOf(false) }

    Box(
        modifier
            .fillMaxSize()
            .semantics { isTraversalGroup = true }
    ) {
        SearchBar(
            modifier = Modifier
                .align(Alignment.TopCenter)
                .semantics { traversalIndex = 0f },
            inputField = {
                // Customizable input field implementation
                SearchBarDefaults.InputField(
                    query = query,
                    onQueryChange = onQueryChange,
                    onSearch = {
                        onSearch(query)
                        expanded = false
                    },
                    expanded = expanded,
                    onExpandedChange = { expanded = it },
                    placeholder = placeholder,
                    leadingIcon = leadingIcon,
                    trailingIcon = trailingIcon
                )
            },
            expanded = expanded,
            onExpandedChange = { expanded = it },
        ) {
            // Show search results in a lazy column for better performance
            LazyColumn {
                items(count = searchResults.size) { index ->
                    val resultText = searchResults[index]
                    ListItem(
                        headlineContent = { Text(resultText) },
                        supportingContent = supportingContent?.let { { it(resultText) } },
                        leadingContent = leadingContent,
                        colors = ListItemDefaults.colors(containerColor = Color.Transparent),
                        modifier = Modifier
                            .clickable {
                                onResultClick(resultText)
                                expanded = false
                            }
                            .fillMaxWidth()
                            .padding(horizontal = 16.dp, vertical = 4.dp)
                    )
                }
            }
        }
    }
}

कोड के बारे में अहम बातें

  • जब भी उपयोगकर्ता खोज बार में कोई टेक्स्ट टाइप करता है या मिटाता है, तब onQueryChange लैम्डा फ़ंक्शन को कॉल किया जाता है.
  • SearchBarDefaults.InputField में leadingIcon शामिल है. इससे इनपुट फ़ील्ड की शुरुआत में खोज आइकॉन जुड़ जाता है. साथ ही, इसमें trailingIcon शामिल है. इससे इनपुट फ़ील्ड के आखिर में "ज़्यादा विकल्प" आइकॉन जुड़ जाता है. यहां उपयोगकर्ता को क्रम से लगाने और फ़िल्टर करने के विकल्प दिए जा सकते हैं.
  • onSearch = { … }, onSearch लैंबडा को कॉल करता है और खोज सबमिट होने पर खोज बार को छोटा कर देता है.
  • LazyColumn, खोज के संभावित तौर पर ज़्यादा नतीजों को आसानी से मैनेज करता है. यह searchResults सूची में मौजूद हर आइटम को दोहराता है और हर नतीजे को ListItem के तौर पर दिखाता है.
  • हर ListItem कंपोज़ेबल में, आइटम का टेक्स्ट, अतिरिक्त जानकारी दिखाने वाला टेक्स्ट, और आइटम के leadingContent के तौर पर स्टार आइकॉन दिखता है. इस उदाहरण में, आइटम को पसंदीदा के तौर पर मार्क करने का विकल्प दिखाया गया है.
  • फ़िल्टर करने के लॉजिक के लिए, GitHub पर मौजूद पूरे सोर्स कोड में CustomizableSearchBarExample देखें.

नतीजा

इस इमेज में, खोज बार दिखाया गया है. इसमें &#39;खोज बार में मौजूद टेक्स्ट खोजें&#39; लिखा है. खोज बार के नीचे, खोज के लिए सुझावों की एक सूची दिखती है. हर सुझाव के बगल में स्टार का आइकॉन होता है.
तीसरी इमेज. खोज बार में काम के सुझाव दिखाए गए हैं.

अन्य संसाधन