Row本身是不支持滚动的(Column同理),但是想要滚动的话,可以使用Modifier.horizontalScroll()
来实现,代码如下
复制Row(Modifier.horizontalScroll(rememberScrollState())) {
}
Modifier.horizontalScroll()
水平滚动Modifier.verticalScroll()
垂直滚动注意:compose似乎不支持一个水平滚动嵌套垂直滚动(或垂直滚动中嵌套水平滚动),所以相应布局需要合理设计
此外,提及下,如果想使用像ListView
或RecyclerView
那样的列表组件,在Compose中可以使用LazyRow
或LazyColumn
,这部分内容之后会讲解到,敬请期待
取值有三个值:
与上面一样,布局高度如果是自适应的,则不会有效果
复制Row(verticalAlignment = Alignment.CenterVertically) {
Box(
Modifier
.background(Color.Green)
.size(100.dp)) {
}
Box(
Modifier
.background(Color.Blue)
.size(100.dp)) {
}
Box(
Modifier
.background(Color.Red)
.size(100.dp)) {
}
}
此布局和Row布局的参数一样,只是名字有所区别,使用方法和上面都一样
Spacer,直接翻译的话,应该是空格,其主要就是充当margin的作用,一般使用modifier
修饰符来设置宽高占位来达到margin效果
官方封装好的Material Design的卡片布局
复制fun Card(
modifier: Modifier = Modifier,
shape: Shape = MaterialTheme.shapes.medium,
backgroundColor: Color = MaterialTheme.colors.surface,
contentColor: Color = contentColorFor(backgroundColor),
border: BorderStroke? = null,
elevation: Dp = 1.dp,
content: @Composable () -> Unit
)
复制Card(modifier = Modifier.fillMaxWidth().padding(20.dp),elevation = 10.dp) {
Text(text = "hello world")
}
效果如下:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。