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

API পৃষ্ঠ
সার্চ বার বাস্তবায়ন করতে SearchBar কম্পোজেবল ব্যবহার করুন। এই কম্পোজেবলের মূল পরামিতিগুলির মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত রয়েছে:
-
inputField: অনুসন্ধান বারের ইনপুট ক্ষেত্র সংজ্ঞায়িত করে। এটি সাধারণতSearchBarDefaults.InputFieldব্যবহার করে, যা কাস্টমাইজেশনের অনুমতি দেয়:-
query: ইনপুট ফিল্ডে যে ক্যোয়ারী টেক্সট দেখানো হবে। -
onQueryChange: ল্যাম্বডা ক্যোয়ারী স্ট্রিং এর পরিবর্তনগুলি পরিচালনা করতে।
-
-
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দেখুন।
ফলাফল

অতিরিক্ত সম্পদ
- উপাদান নকশা: অনুসন্ধান বার