সার্চ বার

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

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

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 পূরণ করে।

ফলাফল

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

ফলাফল

একটি সার্চ বার দেখানো হয়েছে যাতে &quot;ভিতরে টেক্সট সার্চ করুন&quot; ইঙ্গিতপূর্ণ শব্দ রয়েছে। সার্চ বারের নিচে, সার্চ সাজেশনের একটি তালিকা দেখানো হয়, প্রতিটি সাজেশনের পাশে একটি স্টার আইকন থাকে।
ছবি ৩. প্রাসঙ্গিক সাজেশন সহ সার্চ বার দেখানো হয়েছে।

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