[введите описание изображения здесь](https://i.sstatic.net/rUq5nDLk.png)< /p>
Код: Выделить всё
@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun MyCollapsingLayout() {
// Define state for tabs
val tabs = listOf("Tab 1", "Tab 2", "Tab 3")
var selectedTabIndex by remember { mutableIntStateOf(0) }
val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
// LazyColumn state to detect scrolling
val listState = rememberLazyListState()
Scaffold(
topBar = {
// Wrapping both the MediumTopAppBar and the SearchBar in a single Column
Column(
modifier = Modifier
.nestedScroll(scrollBehavior.nestedScrollConnection) // Attach scroll behavior
.fillMaxWidth()
.zIndex(1f)
) {
// MediumTopAppBar with collapsing behavior
MediumTopAppBar(
title = { Text("Medium AppBar") },
scrollBehavior = scrollBehavior
)
// Search bar is part of the collapsible area
SearchBar()
}
},
content = { padding ->
LazyColumn(
state = listState, // Attach LazyColumn to listen for scrolling
modifier = Modifier
.fillMaxSize()
.padding(padding)
) {
// Sticky header for TabRow, it will stay at the top when scrolled
stickyHeader {
TabRow(
selectedTabIndex = selectedTabIndex,
modifier = Modifier
.fillMaxWidth()
.zIndex(1f) // Ensures the tab stays above scrolling content
) {
tabs.forEachIndexed { index, tab ->
Tab(
selected = selectedTabIndex == index,
onClick = { selectedTabIndex = index },
text = { Text(tab) }
)
}
}
}
// The rest of the scrollable content
items(50) { index ->
ListItem(text = "Item $index")
}
}
}
)
}
@Composable
fun SearchBar() {
// Search Bar composable that will scroll away with the MediumTopAppBar
TextField(
value = "",
onValueChange = {},
placeholder = { Text("Search...") },
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
)
}
@Composable
fun ListItem(text: String) {
Text(
text = text,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
)
}
Теперь TopAppBr свернут, но SearchView закреплен там
Подробнее здесь: https://stackoverflow.com/questions/790 ... view-below