前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Row本身是不支持滚动,如何实现滚动

Row本身是不支持滚动,如何实现滚动

原创
作者头像
艳艳代码杂货店
修改2021-09-26 09:37:52
1.8K0
修改2021-09-26 09:37:52
举报
文章被收录于专栏:艳艳代码杂货店

Row本身是不支持滚动的(Column同理),但是想要滚动的话,可以使用Modifier.horizontalScroll()来实现,代码如下

代码语言:javascript
复制
复制Row(Modifier.horizontalScroll(rememberScrollState())) {
}
  • Modifier.horizontalScroll() 水平滚动
  • Modifier.verticalScroll() 垂直滚动

注意:compose似乎不支持一个水平滚动嵌套垂直滚动(或垂直滚动中嵌套水平滚动),所以相应布局需要合理设计

此外,提及下,如果想使用像ListViewRecyclerView那样的列表组件,在Compose中可以使用LazyRowLazyColumn,这部分内容之后会讲解到,敬请期待

verticalAlignmentment

取值有三个值:

  • Alignment.CenterVertically 居中
  • Alignment.Top 靠顶部
  • Alignment.Bottom 靠底部

与上面一样,布局高度如果是自适应的,则不会有效果

代码语言:javascript
复制
复制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)) {
    }
}

Column

此布局和Row布局的参数一样,只是名字有所区别,使用方法和上面都一样

  • verticalArrangement 垂直方向排列
  • horizontalAlignmentment 水平方向对齐

Spacer

Spacer,直接翻译的话,应该是空格,其主要就是充当margin的作用,一般使用modifier修饰符来设置宽高占位来达到margin效果

Card

官方封装好的Material Design的卡片布局

代码语言:javascript
复制
复制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
)
代码语言:javascript
复制
复制Card(modifier = Modifier.fillMaxWidth().padding(20.dp),elevation = 10.dp) {
    Text(text = "hello world")
}

效果如下:

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • verticalAlignmentment
  • Column
  • Spacer
  • Card
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档