Android Jetpack Compose 的布局基础

我想用 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 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式