खोज की सुविधा लागू करने के लिए, खोज बार का इस्तेमाल करें. सर्च बार, खोज के लिए हमेशा उपलब्ध रहने वाला फ़ील्ड होता है. इसकी मदद से, उपयोगकर्ता आपके ऐप्लिकेशन में काम के नतीजे देखने के लिए, कोई कीवर्ड या वाक्यांश डाल सकते हैं. हमारा सुझाव है कि अगर आपके ऐप्लिकेशन का मुख्य फ़ोकस खोज पर है, तो सर्च बार का इस्तेमाल करें.
एपीआई सरफेस
खोज बार लागू करने के लिए, 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 के ट्रैवर्सल के क्रम को कंट्रोल करता है.isTraversalGroupकोBoxके लिए सेट किया गया है, ताकि इसके सभी चाइल्ड कंपोज़ेबल को ग्रुप किया जा सके.traversalIndexको सेट किया जाता है, ताकि यह तय किया जा सके कि TalkBack, ग्रुप के हर सदस्य की सुलभता से जुड़ी जानकारी को किस क्रम में पढ़ेगा. TalkBack,-1जैसी नेगेटिव वैल्यू वाले पीयर की सुलभता से जुड़ी जानकारी को1जैसी पॉज़िटिव वैल्यू वाले पीयर की सुलभता से जुड़ी जानकारी से पहले पढ़ता है. वैल्यू फ़्लोट होने की वजह से, कई पीयर के लिए कस्टम ऑर्डर तय किया जा सकता है. इसके लिए, हर पीयर पर-1.0और1.0के बीच की वैल्यू सेट करें.
SearchBarमें, उपयोगकर्ता के इनपुट के लिएinputFieldऔर खोज के सुझाव दिखाने के लिएColumnशामिल होता है.SearchBarDefaults.InputField, इनपुट फ़ील्ड बनाता है और उपयोगकर्ता की क्वेरी में होने वाले बदलावों को मैनेज करता है.onQueryChange, टेक्स्ट इनपुट को मैनेज करता है. साथ ही, जब भी इनपुट फ़ील्ड में टेक्स्ट बदलता है, तब वह स्थिति को अपडेट करता है.The 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) ) } } } } }
कोड के बारे में अहम जानकारी
- जब भी उपयोगकर्ता खोज बार में कोई टेक्स्ट टाइप करता है या मिटाता है, तब
onQueryChangelambda फ़ंक्शन को कॉल किया जाता है. SearchBarDefaults.InputFieldमेंleadingIconशामिल है. इससे इनपुट फ़ील्ड की शुरुआत में खोज आइकॉन जुड़ जाता है. साथ ही, इसमेंtrailingIconशामिल है. इससे इनपुट फ़ील्ड के आखिर में "ज़्यादा विकल्प" आइकॉन जुड़ जाता है. यहां उपयोगकर्ता को क्रम से लगाने और फ़िल्टर करने के विकल्प दिए जा सकते हैं.onSearch = { … }, खोज सबमिट होने परonSearchलैंबडा को कॉल करता है और खोज बार को छोटा कर देता है.LazyColumn, खोज के ज़्यादा नतीजों को आसानी से मैनेज करता है. यहsearchResultsसूची में मौजूद हर आइटम को बारी-बारी से दिखाता है और हर नतीजे कोListItemके तौर पर दिखाता है.- हर
ListItemकंपोज़ेबल में, आइटम का टेक्स्ट, अतिरिक्त जानकारी दिखाने वाला टेक्स्ट, और स्टार आइकॉन को आइटम केleadingContentके तौर पर दिखाया जाता है. इस उदाहरण में, आइटम को पसंदीदा के तौर पर सेव करने का विकल्प दिखाया गया है. - फ़िल्टर करने के लॉजिक के लिए, GitHub पर मौजूद पूरे सोर्स कोड में
CustomizableSearchBarExampleदेखें.
नतीजा
अन्य संसाधन
- मटीरियल डिज़ाइन: खोज बार