সার্চ কার্যকারিতা প্রয়োগ করতে সার্চ বার ব্যবহার করুন। সার্চ বার হল একটি স্থায়ী সার্চ ফিল্ড যা ব্যবহারকারীদের আপনার অ্যাপের মধ্যে প্রাসঙ্গিক ফলাফল দেখানোর জন্য একটি কীওয়ার্ড বা শব্দগুচ্ছ লিখতে দেয় এবং আপনার অ্যাপের প্রাথমিক ফোকাস সার্চ হলে এটি সাজেস্ট করা হয়।
API সারফেস
সার্চ বার প্রয়োগ করতে 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মডিফায়ার টকব্যাক ট্র্যাভার্সাল অর্ডার কন্ট্রোল করে।isTraversalGroup-এর সব চাইল্ড কম্পোজেবল গ্রুপ করার জন্যBox-এ সেট করা হয়েছে।traversalIndex-এর মাধ্যমে টকব্যাক কোন ক্রমে প্রতিটি গ্রুপ পিয়ার থেকে অ্যাক্সেসিবিলিটি সংক্রান্ত তথ্য পড়বে তা নির্দিষ্ট করা হয়। টকব্যাক,1-এর মতো পজিটিভ ভ্যালু সহ পিয়ারের আগে-1-এর মতো নেগেটিভ ভ্যালু সহ পিয়ারের অ্যাক্সেসিবিলিটি তথ্য পড়ে। ভ্যালু ফ্লোট হওয়ার কারণে, আপনি প্রতিটি পিয়ারে-1.0ও1.0-এর মধ্যে ভ্যালু সেট করে অনেক পিয়ারের কাস্টম অর্ডার নির্দিষ্ট করতে পারবেন।
SearchBar-এ ব্যবহারকারীর ইনপুটের জন্য একটিinputFieldএবং সার্চ সাজেশন দেখানোর জন্য একটিColumnথাকে।SearchBarDefaults.InputFieldইনপুট ফিল্ড তৈরি করে এবং ব্যবহারকারীর কোয়েরিতে পরিবর্তন ম্যানেজ করে।onQueryChangeটেক্সট ইনপুট ম্যানেজ করে এবং ইনপুট ফিল্ডে টেক্সট পরিবর্তন হলে স্ট্যাটাস আপডেট করে।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হিসেবে একটি স্টার আইকন দেখায়। এই উদাহরণে, আইটেমটি পছন্দের তালিকায় যোগ করার বিকল্প দেখানো হয়েছে। - ফিল্টারিং লজিকের জন্য, GitHub-এ সম্পূর্ণ
সোর্স কোডে
CustomizableSearchBarExampleদেখুন।
ফলাফল
অতিরিক্ত রিসোর্স
- মেটেরিয়াল ডিজাইন: সার্চ বার