সার্চ কার্যকারিতা বাস্তবায়ন করতে একটি সার্চ বার ব্যবহার করুন। সার্চ বার হলো একটি স্থায়ী সার্চ ফিল্ড, যেখানে ব্যবহারকারীরা কোনো কীওয়ার্ড বা শব্দগুচ্ছ প্রবেশ করিয়ে আপনার অ্যাপের মধ্যেই প্রাসঙ্গিক ফলাফল দেখতে পারেন। যখন আপনার অ্যাপের মূল উদ্দেশ্যই সার্চ হয়, তখন এটি ব্যবহার করার পরামর্শ দেওয়া হয়।

এপিআই পৃষ্ঠ
সার্চ বার বাস্তবায়ন করতে 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মডিফায়ার টকব্যাক ট্রাভার্সাল অর্ডার নিয়ন্ত্রণ করে।-
Boxএর সমস্ত চাইল্ড কম্পোজেবলকে গ্রুপ করার জন্যisTraversalGroupসেট করা হয়েছে। - TalkBack প্রতিটি গ্রুপ পিয়ার থেকে অ্যাক্সেসিবিলিটি তথ্য কোন ক্রমে পড়বে তা নির্দিষ্ট করার জন্য
traversalIndexসেট করা হয়। 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) ) } } } } }
কোড সম্পর্কে মূল বিষয়গুলো
- যখনই ব্যবহারকারী সার্চ বারে কোনো টেক্সট টাইপ করেন বা মুছে ফেলেন, তখনই
onQueryChangeল্যাম্বডা ফাংশনটি কল করা হয়। -
SearchBarDefaults.InputFieldএকটিleadingIconথাকে, যা ইনপুট ফিল্ডের শুরুতে একটি সার্চ আইকন যোগ করে, এবং একটিtrailingIcon, যা ইনপুট ফিল্ডের শেষে একটি 'আরও বিকল্প' আইকন যোগ করে। এখানে, আপনি ব্যবহারকারীকে সর্টিং এবং ফিল্টারিং বিকল্প প্রদান করতে পারেন। -
onSearch = { … }সার্চ সাবমিট করা হলেonSearchল্যাম্বডাকে কল করে এবং সার্চ বারটি সংকুচিত করে। - একটি
LazyColumnসম্ভাব্য বিপুল সংখ্যক সার্চ রেজাল্ট দক্ষতার সাথে পরিচালনা করে। এটিsearchResultsলিস্টের মধ্য দিয়ে পুনরাবৃত্তি করে এবং প্রতিটি রেজাল্টকে একটিListItemহিসেবে প্রদর্শন করে। - প্রতিটি কম্পোজেবল
ListItemআইটেমের টেক্সট, অতিরিক্ত তথ্য সম্বলিত টেক্সট এবং আইটেমেরleadingContentহিসেবে একটি তারকা আইকন প্রদর্শন করে। এই উদাহরণে, আইটেমটিকে ফেভারিট করার একটি অপশন দেওয়া হয়েছে। - ফিল্টারিং লজিকের জন্য, গিটহাবে সম্পূর্ণ সোর্স কোডের মধ্যে
CustomizableSearchBarExampleদেখুন।
ফলাফল

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