M3E 设计系统
M3E 设计系统 · androidx.compose.material3
SearchBar：折叠输入框与展开结果层1.5.0-alpha25
使用 SearchBarState 连接折叠、全屏和 Docked 模式，并处理滚动行为与返回操作。
最后更新 2026-08-01
新 API 是一套状态机
源码提供 SearchBarState、rememberSearchBarState() 和多个展开容器：FullScreen、Contained、Docked、WithGap。state.progress 表示折叠和展开之间的进度，targetValue 表示目标状态。
val state = rememberSearchBarState()
SearchBar(
state = state,
inputField = { /* SearchBarDefaults.InputField */ },
)具体展示结果时，根据布局选择 ExpandedFullScreenSearchBar 或 ExpandedDockedSearchBar，不要自己在输入框下面绝对定位一个列表冒充完整 SearchBar。
FullScreen 与 Docked
- FullScreen：移动设备、结果成为当前主要任务。
- Docked：大屏或上下文仍需保持可见。
- WithGap：展开层与输入框之间需要视觉间隔。
滚动与返回
源码另外提供 SearchBarScrollState 和 scroll behavior modifier。展开搜索还必须正确响应系统返回：优先收起搜索，而不是直接离开整个页面。
复制即用
折叠输入框 + Docked 展开结果层：
import androidx.compose.material3.ExpandedDockedSearchBar
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSearchBarState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
@Composable
fun DockedSearch() {
val state = rememberSearchBarState()
val textFieldState = rememberTextFieldState()
SearchBar(
state = state,
inputField = {
SearchBarDefaults.InputField(
textFieldState = textFieldState,
searchBarState = state,
onSearch = {},
placeholder = { Text("搜索") },
)
},
)
if (state.targetValue) {
ExpandedDockedSearchBar(
state = state,
inputField = {
SearchBarDefaults.InputField(
textFieldState = textFieldState,
searchBarState = state,
onSearch = {},
)
},
) {
Text("结果列表")
}
}
}rememberTextFieldState 来自 androidx.compose.foundation.text.input；展开后要正确处理系统返回（先收起再离开页面）。