সার্চ বার

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

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

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

ফলাফল

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

অতিরিক্ত রিসোর্স