DockedSearchBarScaffoldSample
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun DockedSearchBarScaffoldSample() {
val textFieldState = rememberTextFieldState()
val searchBarState = rememberWithGapSearchBarState()
val scope = rememberCoroutineScope()
val scrollBehavior = SearchBarDefaults.enterAlwaysSearchBarScrollBehavior()
val appBarWithSearchColors = SearchBarDefaults.appBarWithSearchColors()
val inputField =
@Composable {
SearchBarDefaults.InputField(
textFieldState = textFieldState,
searchBarState = searchBarState,
colors = appBarWithSearchColors.searchBarColors.inputFieldColors,
onSearch = { scope.launch { searchBarState.animateToCollapsed() } },
placeholder = {
Text(modifier = Modifier.clearAndSetSemantics {}, text = "Search")
},
leadingIcon = { SampleLeadingIcon(searchBarState, scope) },
trailingIcon = { SampleTrailingIcon() },
)
}
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
AppBarWithSearch(
scrollBehavior = scrollBehavior,
state = searchBarState,
colors = appBarWithSearchColors,
inputField = inputField,
navigationIcon = { SampleNavigationIcon(searchBarState) },
actions = { SampleActions(searchBarState) },
)
ExpandedDockedSearchBarWithGap(state = searchBarState, inputField = inputField) {
SampleSearchResults(
onResultClick = { result ->
textFieldState.setTextAndPlaceCursorAtEnd(result)
scope.launch { searchBarState.animateToCollapsed() }
}
)
}
},
) { padding ->
LazyColumn(contentPadding = padding, verticalArrangement = Arrangement.spacedBy(8.dp)) {
val list = List(100) { "Text $it" }
items(count = list.size) {
Text(
text = list[it],
modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
)
}
}
}
}