সার্চ বার

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

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

এপিআই পৃষ্ঠ

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

ফলাফল

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

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