সার্চ বার

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

দুটি সার্চ বার দেখানো হয়েছে। বাম দিকের সার্চ বারে শুধুমাত্র একটি টেক্সট ফিল্ড আছে। বাম দিকের সার্চ বারে একটি টেক্সট ফিল্ড এবং তার নিচে একটি সার্চ সাজেশন আছে।
চিত্র ১. একটি মৌলিক অনুসন্ধান বার (১) এবং একটি পরামর্শ (২) সহ একটি অনুসন্ধান বার।

এপিআই সারফেস

সার্চ বার বাস্তবায়নের জন্য 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 সংশোধক টকব্যাক ট্র্যাভার্সাল ক্রম নিয়ন্ত্রণ করে।
    • 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 পূরণ করে।

ফলাফল

বারের ভেতরে 'a' অক্ষর টাইপ করে একটি সার্চ বার দেখানো হবে। সার্চ বারের নিচে ছয়টি সার্চ সাজেশন সম্বলিত একটি তালিকা প্রদর্শিত হবে।
চিত্র ২। পরামর্শ সহ একটি অনুসন্ধান বার প্রদর্শিত হচ্ছে।

ফিল্টার করা তালিকা সহ অনুসন্ধান বার

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

ফলাফল

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

অতিরিক্ত সম্পদ