英文:
Layering with shadow in jetpack compose
问题
我想要实现这个设计：
有一个可滚动的列，在没有足够的空间时，按钮下面会包含项目。
我尝试过这样做：
Box(modifier = Modifier.weight(1f)) {
SubtitleSelector(
state.selectedSubtitle
) { vm.setSubtitle(it) }
Row(
modifier = Modifier
.align(Alignment.BottomCenter)
.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(Theme.spacing.small_3)
) {
ClearAllButton(modifier = Modifier.weight(1f)) {
vm.clearAll()
}
ApplyButton(modifier = Modifier.weight(1f)) {
}
}
}
但是当项目移到按钮下面时，它们会消失，我希望它们能像上面的图片一样带有一点阴影。
有什么帮助吗？
英文:
I want to implement this design:
There is a scrollabe column that contains items underneath the buttons when there is no enough space.
I tried to do this:
Box(modifier = Modifier.weight(1f)) {
SubtitleSelector(
state.selectedSubtitle
) { vm.setSubtitle(it) }
Row(
modifier = Modifier
.align(Alignment.BottomCenter)
.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(Theme.spacing.small_3)
) {
ClearAllButton(modifier = Modifier.weight(1f)) {
vm.clearAll()
}
ApplyButton(modifier = Modifier.weight(1f)) {
}
}
}
But the items disappear when they go underneath the buttons, I want them to appear with a little shadow like the image above.
Any help?
答案1
得分: 1
这很简单，您可以将所有内容包装在一个Box()中。在Box()内部，将列表放在底部，然后是一个包含2个Button()的Row()，为Row()设置背景。
在我的示例中，我使用**Brush.verticalGradient()**来设置渐变背景，从而创建容器的平滑渐变效果。或者，您可以将背景颜色设置为具有相同模糊效果的alpha颜色。但渐变效果肯定会更好：
@Composable
fun Greeting() {
val list = listOf(
"aaa", "bbb", "ccc", "ddd", "eee", "fff",
"ggg", "hhh", "iii", "jjj", "kkk", "lll", "mmm",
"nnn", "ooo", "ppp", "qqq", "rrr", "sss", "ttt"
)
val heightForButton = LocalConfiguration.current.screenHeightDp * 0.3
Box(
modifier = Modifier
.fillMaxSize()
.padding(12.dp)
) {
LazyColumn(
modifier = Modifier.fillMaxSize(),
content = {
items(list) {
Text(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 8.dp)
.background(
color = Color.DarkGray,
shape = RoundedCornerShape(8.dp)
)
.padding(horizontal = 4.dp),
text = it,
fontSize = 24.sp,
)
}
}
)
Row(
modifier = Modifier
.fillMaxWidth()
.height(heightForButton.dp)
.align(Alignment.BottomCenter)
.background(
brush = Brush.verticalGradient(
colors = listOf(Color.Transparent, Color(0xE6FFFFFF))
)
),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(
modifier = Modifier
.weight(1f)
.border(
width = 1.dp,
color = Color.Red,
shape = RoundedCornerShape(8.dp)
)
.background(
color = Color.White,
shape = RoundedCornerShape(8.dp)
)
.padding(8.dp),
text = "Cancel",
fontSize = 24.sp,
textAlign = TextAlign.Center
)
Spacer(modifier = Modifier.width(8.dp))
Text(
modifier = Modifier
.weight(1f)
.background(
color = Color.Red,
shape = RoundedCornerShape(8.dp)
)
.padding(8.dp),
text = "Accept",
fontSize = 24.sp,
textAlign = TextAlign.Center
)
}
}
}
英文:
This is simple, you can wrap all the content in a Box(). Inside Box(), let the list go to the bottom, then a Row() containing 2 Button(), set the background for Row().
In my example, I use Brush.verticalGradient() to set a gradient background that creates a smooth gradation of the container. Or you can set the background color to an alpha color that also has the same blur effect. But surely gradients would be better:
@Composable
fun Greeting() {
val list = listOf(
"aaa", "bbb", "ccc", "ddd", "eee", "fff",
"ggg", "hhh", "iii", "jjj", "kkk", "lll", "mmm",
"nnn", "ooo", "ppp", "qqq", "rrr", "sss", "ttt"
)
val heightForButton = LocalConfiguration.current.screenHeightDp * 0.3
Box(
modifier = Modifier
.fillMaxSize()
.padding(12.dp)
) {
LazyColumn(
modifier = Modifier.fillMaxSize(),
content = {
items(list) {
Text(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 8.dp)
.background(
color = Color.DarkGray,
shape = RoundedCornerShape(8.dp)
)
.padding(horizontal = 4.dp),
text = it,
fontSize = 24.sp,
)
}
}
)
Row(
modifier = Modifier
.fillMaxWidth()
.height(heightForButton.dp)
.align(Alignment.BottomCenter)
.background(
brush = Brush.verticalGradient(
colors = listOf(Color.Transparent, Color(0xE6FFFFFF))
)
),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(
modifier = Modifier
.weight(1f)
.border(
width = 1.dp,
color = Color.Red,
shape = RoundedCornerShape(8.dp)
)
.background(
color = Color.White,
shape = RoundedCornerShape(8.dp)
)
.padding(8.dp),
text = "Cancel",
fontSize = 24.sp,
textAlign = TextAlign.Center
)
Spacer(modifier = Modifier.width(8.dp))
Text(
modifier = Modifier
.weight(1f)
.background(
color = Color.Red,
shape = RoundedCornerShape(8.dp)
)
.padding(8.dp),
text = "Accept",
fontSize = 24.sp,
textAlign = TextAlign.Center
)
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论