অনুসন্ধান কার্যকারিতা বাস্তবায়নের জন্য একটি অনুসন্ধান বার ব্যবহার করুন। একটি অনুসন্ধান বার হল একটি স্থায়ী অনুসন্ধান ক্ষেত্র যা ব্যবহারকারীদের আপনার অ্যাপের মধ্যে প্রাসঙ্গিক ফলাফল প্রদর্শনের জন্য একটি কীওয়ার্ড বা বাক্যাংশ প্রবেশ করতে দেয় এবং যখন অনুসন্ধান আপনার অ্যাপের প্রাথমিক লক্ষ্য হয় তখন এটি সুপারিশ করা হয়।

এপিআই সারফেস
সার্চ বার বাস্তবায়নের জন্য 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সংশোধক টকব্যাক ট্র্যাভার্সাল ক্রম নিয়ন্ত্রণ করে।-
isTraversalGroupBoxজন্য তার সমস্ত চাইল্ড কম্পোজেবল গ্রুপ করার জন্য সেট করা হয়েছে। -
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দেখুন।
ফলাফল

অতিরিক্ত সম্পদ
- মেটেরিয়াল ডিজাইন: সার্চ বার