Compose学习与总结一：compose里的layout

神秘的曹先生

已于 2023-10-12 23:30:51 修改

阅读量215

点赞数

文章标签：安卓

于 2023-10-12 23:25:37 首次发布

本文链接：https://blog.csdn.net/b5137132/article/details/133801247

版权

工作很多年了，没觉得自己多牛，所以也一直没有写点啥的想法，最近回顾一下发现也学了知识。写些博客记录一下，既是传播也是总结。先从android 的compose UI 框架开始吧。

compose 是谷歌新推出来的android的UI框架，有着更贴合mvvm模式，更便捷，更符合前端语言等等优势。但是同时他也和原来的xml布局大有不同，设计思想，运行机制也很不一样。

我是个实用主义者，所以是从通俗易懂，先掌握后精通的角度，开始书写。其实我一直觉得具体的复杂运行机制直接看官网就行了。下面开始由易到难来进行总结。

首先按原有android布局逻辑来说肯定是先viewgroup 后view来掌握。

所以首先推荐先学习 compose.foundation.layout 这个包。

里面包括了我们compose中一直伴随着我们的，也最重要的API Modifier 修饰符。

Modifier 他在我们所有compose 组件中都可以作为一个属性，传给组件。他有非常多可以设置属性的方法，几乎包含了所有布局中能用到的。最开始这里我们主要掌握以下这些： width() heigh() fillMaxHeigh() fillMaxWidth() fillMaxSize() 设置宽高和设置为最大宽高。requireWidth() requireHeigh() 声明内容的宽高 requireSize() 声明内容的大小

absoluteOffset() 绝对偏移量（可以是px也可以是dp）absoltePadding()绝对边距量,offset() 相对偏移量。

widthIn() heightIn() requireWidthIn() requireHeightIn() 声明在指定范围内的宽高。

以上就是我们布局常用的方法，还有很多事件方法也有如clickable 点击事件 draggable 拖动事件，一直从最初级到最高的各种动画和自定义view都会使用到Modifier，用到哪学到哪，或者对着谷歌官网刷一遍有个总体的印象也很不错。

https://developer.android.google.cn/reference/kotlin/androidx/compose/foundation/package-summary#extension-functions-summary

下面我们介绍一些常用最大的包裹内容的组件。

Box 盒子。看名字就知道就是个空盒子用来占据空间，包裹控件的。如果你会前端理解成div 也没有多大问题，对比android原来的用法看成一个单纯的Framelayout，对于这个空盒子我们可以通过Modifer 修饰符来设置属性，比如宽高，背景，边框，内容对齐的方式等等。下面是一个综合用例。

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Box(modifier = Modifier
        .fillMaxWidth()
        .height(300.dp)
        .background(color = Color.Green, shape = RoundedCornerShape(20.dp))
    , contentAlignment = Alignment.Center
    ) {
        Text(text = "我是一个内容居中的盒子")
    }
}

效果如下：

Surface 平面，也是个容器和Box一样，但是他是平面控件的概念，可以理解为一个空的布局。但是并不是意味着Surface里面的控件不会重叠！！！

这里是比较难解释的地方，因为Box和Surface相互可以实现一模一样的功能。我是从语义化，和试用功能来理解，决定他们的使用方式。

从布局上来说，大控件的用Surface ，小的控件用Box，谷歌默认生成的根布局就是Surface
从语义化来说，Box用来创建一个矩形的区域，Surface用来创建一块可交互的页面。

所以需要交互的地方优先使用Surface。

从谷歌官方推荐上来讲需要实现层层叠叠效果的优先使用Box。

这里不需要过多的纠结，不熟练时只用一个也不会影响到布局书写。

然后就是我们的Spacer 控件了，这个非常好理解，就是个留白，空白控件用来快速实现原来的xml布局里面的margin效果。

接着就是我们常用的Column和Row 纵向布局和横向布局。首先来说Column，你可以理解为原来垂直方向线性布局，每一个独立的子控件都会占据一行。但是其多了两个属性verticalArrangement 和 horizontalAlignment 来决定其纵向和横向布局的对齐方式。Row同理，理解为横向的线性布局，其他同理。以下是演示代码和效果。

Column：

Column(modifier = Modifier
    .fillMaxWidth()
    .height(300.dp)
    .background(color = Color.Green, shape = RoundedCornerShape(20.dp)),
    verticalArrangement=Arrangement.Center,
    horizontalAlignment =Alignment.End
) {
    Text(text = "我是一个内容居中的盒子")
    Text(text = "我是一个内容居中的盒子2")
}

Row :

Row(modifier = Modifier
    .fillMaxWidth()
    .height(300.dp)
    .background(color = Color.Green, shape = RoundedCornerShape(20.dp)),
    horizontalArrangement=Arrangement.Center,
    verticalAlignment =Alignment.Bottom
) {
    Text(text = "我是一个内容居中的盒子")
    Text(text = "我是一个内容居中的盒子2")
}