英文:
Layering in Jetpack Compose
问题
我正在尝试创建一个具有底部工具栏和普通布局屏幕的Android/Jetpack Compose布局。
但是在工具栏后面和主屏幕前面，我正在尝试添加一个图层，可以打开以填充页面，然后折叠，如图1到图2所示，然后返回。
我遇到的主要难点是将三个组件叠加在彼此之上。在Jetpack Compose中实现这样的组件叠加，最佳方法是什么？
图1
图2
英文:
I'm trying to create an Android/Jetpack Compose layout that has a toolbar at the bottom and a normal layout screen.
But behind the toolbar and in front of the main screen, I'm trying to add a layer, that can be opened to fill the page, and then collapse, as shown in Fig1 to Fig2 and back.
The main sticking point I'm struggling with is the layering of three components on top of each other. What is the best way to layer component on top of each other in Jetpack Compose like this?
Fig1
Fig2
答案1
得分: 0
根据评论，Box 是前进的方式。
如果有其他人正在寻找类似的解决方案：
@Composable
fun Layout() {
val configuration = LocalConfiguration.current
val screenHeight = configuration.screenHeightDp.dp
val screenWidth = configuration.screenWidthDp.dp
var expanded by remember { mutableStateOf(false) }
val size: Dp by animateDpAsState(if (expanded) screenHeight else 120.dp)
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.DarkGray)
) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(size)
.background(color = Color.Yellow)
.align(Alignment.BottomStart)
) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text("History")
Button(onClick = {
expanded = !expanded
}) {
Text("^")
}
}
}
Box(
modifier = Modifier
.fillMaxWidth()
.height(60.dp)
.background(color = Color.Green)
.align(Alignment.BottomStart)
) {
}
}
}
请注意，我已经将HTML实体字符（如 "）替换为相应的文本字符。
英文:
As per the comments, Box was the way to go.
In case someone else is looking for a similar solution:
@Composable
fun Layout() {
val configuration = LocalConfiguration.current
val screenHeight = configuration.screenHeightDp.dp
val screenWidth = configuration.screenWidthDp.dp
var expanded by remember { mutableStateOf(false) }
val size: Dp by animateDpAsState(if(expanded) screenHeight else 120.dp)
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.DarkGray)
) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(size)
.background(color = Color.Yellow)
.align(Alignment.BottomStart)
) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text("History")
Button(onClick = {
expanded = !expanded
}) {
Text("^")
}
}
}
Box(
modifier = Modifier
.fillMaxWidth()
.height(60.dp)
.background(color = Color.Green)
.align(Alignment.BottomStart)
) {
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论