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

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

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