সার্চ ফাংশনালিটি প্রয়োগ করতে সার্চ বার ব্যবহার করুন। সার্চ বার হল একটি স্থায়ী সার্চ ফিল্ড যা ব্যবহারকারীদের কোনও কীওয়ার্ড বা বাক্যাংশ লিখে আপনার অ্যাপের মধ্যে প্রাসঙ্গিক ফলাফল দেখতে দেয় এবং আপনার অ্যাপের মূল ফোকাস সার্চ হলে এটি ব্যবহার করার সাজেশন দেওয়া হয়।
API সারফেস
সার্চ বার প্রয়োগ করতে 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মডিফায়ার টকব্যাক ট্রাভার্সাল অর্ডার কন্ট্রোল করে।Box-এর সব চাইল্ড কম্পোজ করার জন্যisTraversalGroupসেট করা আছে।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 = { … }onSearchlambda-কে কল করে এবং সার্চ জমা দেওয়ার পরে সার্চ বারটি আড়াল করে দেয়।LazyColumnসম্ভাব্য বিপুল সংখ্যক সার্চ ফলাফল দক্ষতার সাথে ম্যানেজ করে। এটিsearchResultsতালিকার মাধ্যমে পুনরাবৃত্তি করে এবং প্রতিটি ফলাফলকেListItemহিসেবে দেখায়।- প্রতিটি
ListItemকম্পোজ করার উপযুক্ত আইটেম টেক্সট, অতিরিক্ত তথ্য দেখানো টেক্সট এবং আইটেমেরleadingContentহিসেবে একটি স্টার আইকন দেখায়। এই উদাহরণে, আইটেমটি পছন্দের তালিকায় যোগ করার একটি বিকল্প দেখানো হয়েছে। - ফিল্টারিং লজিকের জন্য, GitHub-এ সম্পূর্ণ
সোর্স কোডে
CustomizableSearchBarExampleদেখুন।
ফলাফল
অতিরিক্ত রিসোর্স
- মেটেরিয়াল ডিজাইন: সার্চ বার