সার্চ বার

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

দুটি অনুসন্ধান বার দেখানো হয়. বাম দিকে একটি শুধুমাত্র একটি পাঠ্য ক্ষেত্র আছে.   বাম দিকের অনুসন্ধান বারে একটি পাঠ্য ক্ষেত্র এবং এটির নীচে একটি অনুসন্ধানের পরামর্শ রয়েছে৷
চিত্র 1. একটি মৌলিক অনুসন্ধান বার (1) এবং একটি পরামর্শ সহ একটি অনুসন্ধান বার (2)।

API পৃষ্ঠ

সার্চ বার বাস্তবায়ন করতে SearchBar কম্পোজেবল ব্যবহার করুন। এই কম্পোজেবলের মূল পরামিতিগুলির মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত রয়েছে:

  • inputField : অনুসন্ধান বারের ইনপুট ক্ষেত্র সংজ্ঞায়িত করে। এটি সাধারণত SearchBarDefaults.InputField ব্যবহার করে, যা কাস্টমাইজেশনের অনুমতি দেয়:
    • query : ইনপুট ফিল্ডে যে ক্যোয়ারী টেক্সট দেখানো হবে।
    • onQueryChange : ল্যাম্বডা ক্যোয়ারী স্ট্রিং এর পরিবর্তনগুলি পরিচালনা করতে।
  • 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' অক্ষর দিয়ে একটি অনুসন্ধান বার দেখানো হয়েছে। ছয়টি অনুসন্ধানের পরামর্শ সম্বলিত একটি তালিকা অনুসন্ধান বারের নীচে প্রদর্শিত হয়।
চিত্র 2. প্রস্তাবনা সহ একটি অনুসন্ধান বার প্রদর্শিত হয়েছে।

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

এই উদাহরণটি একটি SearchBar দেখায় যা ব্যবহারকারীর অনুসন্ধান প্রশ্নের উপর ভিত্তি করে একটি তালিকা ফিল্টার করে:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomizableSearchBar(
    query: String,
    onQueryChange: (String) -> Unit,
    onSearch: (String) -> Unit,
    searchResults: List<String>,
    onResultClick: (String) -> Unit,
    // 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,
    modifier: Modifier = Modifier
) {
    // 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 দেখুন।

ফলাফল

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

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