android compose SearchBar 搜索栏使用

使用 SearchBar 可组合项实现搜索栏。此可组合项的关键参数包括以下内容：

inputField：定义搜索栏的输入字段。它通常使用 SearchBarDefaults.InputField，后者允许自定义以下内容：
- query：要在输入字段中显示的查询文本。
- onQueryChange：用于处理查询字符串更改的 lambda。
expanded：一个布尔值，用于指示搜索栏是否展开即可显示建议或过滤后的结果。
onExpandedChange：用于处理下拉列表展开状态更改的 lambda。
content：此搜索栏的内容，用于在 inputField 下方显示搜索结果。

代码要点

rememberSaveable 可确保在配置更改后保留搜索栏是展开还是收起的状态。它会在配置更改期间销毁 activity 之前，将记住的值写入宿主 activity 的 savedInstanceState 软件包。
semantics 修饰符用于控制 TalkBack 遍历顺序。
- 为 Box 设置 isTraversalGroup，以将其所有子可组合项分组。
- 设置 traversalIndex 以指定 TalkBack 从每个组对等项读取无障碍信息的顺序。TalkBack 会先读取具有负值（例如 -1）的对等项的无障碍信息，然后再读取具有正值（例如 1）的对等项的无障碍信息。由于该值是浮点数，因此您可以通过在每个对等项上设置介于 -1.0 和 1.0 之间的值来指定许多对等项的自定义顺序。
SearchBar 包含用于用户输入的 inputField 和用于Column显示搜索建议的。
- SearchBarDefaults.InputField 用于创建输入字段并处理用户查询的更改。
- onQueryChange 用于处理文本输入，并在输入字段中的文本发生更改时更新状态。
- expanded 状态用于控制建议列表的可见性。
searchResults.forEach { result -> ... } 用于遍历 searchResults 列表，并为每个结果创建一个 ListItem 。
- 点击 ListItem 后，它会更新 textFieldState，收起搜索栏，并使用所选搜索结果填充 textField。

复制代码

package com.wn.androidcomposedemo1.basegoogle

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ListItem
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme

/**
 * Author : wn
 * Email : maoning20080808@163.com
 * Date : 2026/6/27 22:39
 * Description : 搜索栏
 */
class SearchBarActivity : ComponentActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AndroidComposeDemo1Theme() {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    SearchBarExample()
                }
            }
        }
    }


    @Composable
    fun SearchBarExample(){
        val textFieldState = remember { TextFieldState() }
        var searchResults by remember { mutableStateOf(emptyList<String>()) }

        fun performSearch(query : String){
            if(query.isBlank()){
                searchResults = emptyList()
            } else {
                val allItems = listOf<String>("Java", "Kotlin", "Flutter", "Compose", "Apple", "Banana", "Company", "City")
                searchResults = allItems.filter { it.contains(query, ignoreCase = true) }
            }
        }

        SimpleSearchBarExample(
            textFieldState = textFieldState,
            onSearch = {
                performSearch(it)
            },
            searchResults = searchResults
        )

    }


    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun SimpleSearchBarExample(
        textFieldState: TextFieldState,
        onSearch: (String) -> Unit,
        searchResults : List<String>
    ){
        var expanded by rememberSaveable { mutableStateOf(false) }

        Box(
            modifier = Modifier.fillMaxSize()
        ){
            SearchBar(
                modifier = Modifier
                    .align (Alignment.TopCenter),
                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},
            ) {
                Column(Modifier.verticalScroll(rememberScrollState())) {
                    searchResults.forEach { result ->
                        ListItem(
                            headlineContent = {Text(result)},
                            modifier = Modifier.clickable{
                                textFieldState.edit { replace(0, length, result) }
                                expanded = false
                            }
                                .fillMaxWidth()
                        )
                    }
                }
            }
        }
    }
}

android compose SearchBar 搜索栏 使用

代码要点

android compose SearchBar 搜索栏使用