खोज की सुविधा लागू करने के लिए, खोज बार का इस्तेमाल करें. सर्च बार, खोज के लिए हमेशा उपलब्ध रहने वाला फ़ील्ड होता है. इसकी मदद से, उपयोगकर्ता कोई कीवर्ड या वाक्यांश डालकर, आपके ऐप्लिकेशन में काम के नतीजे देख सकते हैं. हमारा सुझाव है कि अगर आपके ऐप्लिकेशन का मुख्य फ़ोकस खोज पर है, तो सर्च बार का इस्तेमाल करें.
एपीआई सरफ़ेस
खोज बार लागू करने के लिए, SearchBar कंपोज़ेबल का इस्तेमाल करें. इस कंपोज़ेबल के लिए मुख्य पैरामीटर ये हैं:
inputField: इससे खोज बार के इनपुट फ़ील्ड के बारे में पता चलता है. आम तौर पर, यहSearchBarDefaults.InputFieldका इस्तेमाल करता है. इससे इन चीज़ों को अपनी पसंद के मुताबिक बनाया जा सकता है:query: क्वेरी का वह टेक्स्ट जिसे इनपुट फ़ील्ड में दिखाना है.onQueryChange: क्वेरी स्ट्रिंग में हुए बदलावों को मैनेज करने के लिए लैम्ब्डा.
expanded: यह बूलियन वैल्यू है. इससे पता चलता है कि खोज बार को सुझाव दिखाने या फ़िल्टर किए गए नतीजे दिखाने के लिए बड़ा किया गया है या नहीं.onExpandedChange: ड्रॉपडाउन के बड़े किए गए स्टेटस में बदलावों को मैनेज करने के लिए लैम्ब्डा.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में खोज के चुने गए नतीजे दिखते हैं.
नतीजा
फ़िल्टर की गई सूची के साथ खोज बार
इस उदाहरण में, एक 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देखें.
नतीजा
अन्य संसाधन
- मटीरियल डिज़ाइन: खोज बार