Android Jetpack Compose 的布局基础

更新日期: 2021-01-17 阅读次数: 237 字数: 294 分类: Android

我想用 Android Jetpack Compose 新建一个 FloatingActionButton,找到 StackOverflow 上的一个答案,发现居然看不懂。。。

感觉还是概要地了解一下 Jetpack Compose 的布局基础比较好。

官方 Compose 布局文档

参考这里

https://developer.android.com/jetpack/compose/layout

Column

最常用的自上而下的布局:

import androidx.compose.foundation.layout.Column

Column {
    Text("第一行")
    Text("第二行")
}

若不使用 Column,这两行文字会重叠在一起。

ROW

水平布局。类似 CSS 中为元素设置了 display: flex。

import androidx.compose.foundation.layout.Row

Row {
    Text("第一列")
    Text("第二列")
}

典型的使用场景,如用户信息展示:

  • 左侧头像
  • 右侧昵称

ROW 的详细参数参考

https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#row

例如,水平对齐设置,垂直对齐设置。

参数 Modifier

看 ROW 的详细文档,可以看到其第一个参数是 Modifier。

Modifier 的作用:

  • 指定点击行为
  • 设置 padding
  • 设置 width

Scrollable

  • 少量数据时,使用 ScrollableRow / ScrollableColumn
  • 大量数据时,使用 LazyColumnFor / LazyRowFor

内置组件

例如,我想添加一个 FloatingActionButton,实际上可以使用内置的 Scaffold 设置 FloatingActionButton 来实现。

Scaffold 的文档地址:

https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#scaffold

了解内置的 compose 组件可以大大提高效率。

参考

https://stackoverflow.com/questions/58547448/jetpack-ui-compose-how-to-create-floatingactionbutton

领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊, 查看更多联系方式。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。同时也欢迎关注我的微信公众号“大象工具”: 大象工具微信公众号

相关文章

爱评论不评论

近期节日

查看更多节日