खोज की सुविधा लागू करने के लिए, खोज बार का इस्तेमाल करें. खोज बार, खोज का एक ऐसा फ़ील्ड होता है जो हमेशा दिखता रहता है. इसकी मदद से, उपयोगकर्ता कोई कीवर्ड या वाक्यांश डालकर, आपके ऐप्लिकेशन में काम के नतीजे देख सकते हैं. अगर आपके ऐप्लिकेशन का मुख्य फ़ोकस खोज की सुविधा है, तो खोज बार का इस्तेमाल करने का सुझाव दिया जाता है.
एपीआई सरफ़ेस
खोज बार लागू करने के लिए, 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, हर ग्रुप पीयर से ऐक्सेसबिility की जानकारी किस क्रम में पढ़ेगा. TalkBack, पॉज़िटिव वैल्यू वाले पीयर से पहले, नेगेटिव वैल्यू वाले पीयर की ऐक्सेसबिility की जानकारी पढ़ता है. जैसे,1से पहले-1. वैल्यू फ़्लोट होने की वजह से, हर पीयर पर-1.0और1.0के बीच वैल्यू सेट करके, कई पीयर के लिए कस्टम ऑर्डर तय किया जा सकता है.
SearchBarमें, उपयोगकर्ता के इनपुट के लिएinputFieldऔर खोज के सुझाव दिखाने के लिएColumnto display search suggestions शामिल होता है.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 = { … }calls theonSearchlambda and collapses the search bar when the search is submitted.LazyColumn, खोज के संभावित तौर पर ज़्यादा नतीजों को असरदार तरीके से मैनेज करता है. यहsearchResultsसूची के ज़रिए इटरेट करता है और हर नतीजे कोListItemके तौर पर दिखाता है.- हर
ListItemकंपोज़ेबल, आइटम टेक्स्ट, अतिरिक्त जानकारी दिखाने वाला टेक्स्ट, और स्टार आइकॉन को आइटम केleadingContentके तौर पर दिखाता है. इस उदाहरण में, आइटम को पसंदीदा के तौर पर सेव करने का विकल्प दिखाया गया है. - फ़िल्टर करने की लॉजिक के लिए,
CustomizableSearchBarExampleGitHub पर पूरे सोर्स कोड में देखें.
नतीजा
अन्य संसाधन
- मटीरियल डिज़ाइन: खोज बार