Jetpack Compose实战教程（六）

Jetpack Compose实战教程（六）

第六章 没有了margin，如何区分外边距？内边距？

---

---

一、前言

我们在写xml布局的时候，经常会用到android:margin属性，毕竟除了居中以外，固定位置的偏移就得用到margin，xml中我们使用margin来设置外边距，使用padding来设置内边距。但在compose中，没有了margin属性，只有一个padding，那么我们如何设置外边距和内边距呢？

二、本章目标

能熟练的使用padding来设置内边距和外边距

友情提醒，如果各位看官有不懂的代码可以先看一下之前的章节，循序渐进，如果还是有不懂的，可以给我留言

三、开始编码

请留意：以下代码都是在清单文件中设置了横屏的

3.1 特殊情况下的margin

之所以先说特殊情况下的margin，是为了防止杠精说：明明有margin啊，只是要引入一个组件而已。没错，它就是我们第四章中提到的ConstraintLayout。 compose中的约束布局用法基本和xml一致，第四章我们也进行了一些解析，这里我们就简单上代码说明一下margin的使用

BaseTheme {Surface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colorScheme.background) {ConstraintLayout(Modifier.fillMaxSize().background(color = Color.Yellow)) {Box(modifier = Modifier.size(200.dp).constrainAs(createRef()) {top.linkTo(parent.top,100.dp)start.linkTo(parent.start,100.dp)}.background(color = Color.Blue))}}}

3.2 使用padding设置外边距

在使用xml代码时，我们设置外边距（margin）是在子View设置的，比如有如下代码：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto"android:background="#ffff00"><RelativeLayoutandroid:layout_width="200dp"android:layout_height="200dp"app:layout_constraintTop_toTopOf="parent"app:layout_constraintStart_toStartOf="parent"android:background="#0000ff"android:layout_marginTop="100dp"/></androidx.constraintlayout.widget.ConstraintLayout>

这段代码产生的UI效果如下：

但在compose中，设置外边距恰恰是反过来的，它是在父View中设置，等价的代码写法如下：

BaseTheme {Surface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colorScheme.background) {ConstraintLayout(Modifier.fillMaxSize().background(color = Color.Yellow).padding(top=100.dp)) {Box(modifier = Modifier.size(200.dp).constrainAs(createRef()) {top.linkTo(parent.top)start.linkTo(parent.start)}.background(color = Color.Blue))}}}

这时候，有好奇的小伙伴会问了，那如果我就把这个padding写到Box 里面去，会出现什么效果呢？那么我们就来实践一下

BaseTheme {Surface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colorScheme.background) {ConstraintLayout(Modifier.fillMaxSize().background(color = Color.Yellow)) {Box(modifier = Modifier.size(200.dp).constrainAs(createRef()) {top.linkTo(parent.top)start.linkTo(parent.start)}.background(color = Color.Blue).padding(top=100.dp))}}}

运行结果如下：

可以看到，我们移除了ConstraintLayout（父View）的padding，所以Box（子View）的外间距就没有了，而我们在Box 设置的padding是应用于Box的子View的外边距，那么我们现在来给Box添加一下子View

BaseTheme {Surface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colorScheme.background) {ConstraintLayout(Modifier.fillMaxSize().background(color = Color.Yellow)) {Box(modifier = Modifier.size(200.dp).constrainAs(createRef()) {top.linkTo(parent.top)start.linkTo(parent.start)}.background(color = Color.Blue).padding(top = 100.dp)){Box(modifier = Modifier.size(100.dp).background(color = Color.Red))}}}}

这样就很好理解了吧

3.3 使用padding设置内边距

在尝试使用padding设置内边距之前，大家需要先留意一个坑，这也是为什么我上面的例子全部是用background 来说明的原因，在xml中，我们可以给一个View设置android:background属性，然后如果再设置android:alpha是可以应用到背景上的，并且不需要关心属性设置的先后顺序，比如如下代码：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto"android:background="#ffff00"><RelativeLayoutandroid:layout_width="200dp"android:layout_height="200dp"app:layout_constraintTop_toTopOf="parent"app:layout_constraintStart_toStartOf="parent"android:background="#0000ff"android:alpha="0.6"android:layout_marginTop="100dp"/></androidx.constraintlayout.widget.ConstraintLayout>

我们设置的颜色是蓝色，但因为设置了40%的透明度，最终和黄色的底色交融，就变成了这个灰色，但使用compose的话，必须要将alpha的属性提前，否则将失效，所以重要的话说三遍：

修饰符（Modifier）的函数调用先后顺序很重要！！

修饰符（Modifier）的函数调用先后顺序很重要！！

修饰符（Modifier）的函数调用先后顺序很重要！！

那么我们来看compose的等价代码：

BaseTheme {Surface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colorScheme.background) {ConstraintLayout(Modifier.fillMaxSize().background(color = Color.Yellow).padding(top = 100.dp)) {Box(modifier = Modifier.size(200.dp).constrainAs(createRef()) {top.linkTo(parent.top)start.linkTo(parent.start)}.alpha(0.6f) //如果这行代码放在.background之后，那么将失效.background(color = Color.Blue))}}}

---

好，进入整体，为了让大家更好的理解内边距，这里我不再单纯使用background，而是添加一张图片，我们先看如下代码：

BaseTheme {Surface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colorScheme.background) {ConstraintLayout(Modifier.fillMaxSize().background(color = Color.Yellow).padding(50.dp)) {Box(modifier = Modifier.size(200.dp).constrainAs(createRef()) {top.linkTo(parent.top)start.linkTo(parent.start)}.background(color = Color.Blue)){Image(painter = painterResource(id = R.mipmap.ic_person_detail_delete_unable),contentDescription = null, modifier = Modifier.background(color = Color.Green).size(100.dp).padding(20.dp))}}}}

但还记得我们上面说的“修饰符（Modifier）的函数调用先后顺序很重要！！” 吗？让我们来稍微改一下代码，改变一下padding的位置

BaseTheme {Surface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colorScheme.background) {ConstraintLayout(Modifier.fillMaxSize().background(color = Color.Yellow).padding(50.dp)) {Box(modifier = Modifier.size(200.dp).constrainAs(createRef()) {top.linkTo(parent.top)start.linkTo(parent.start)}.background(color = Color.Blue)){Image(painter = painterResource(id = R.mipmap.ic_person_detail_delete_unable), contentDescription = null, modifier = Modifier.background(color = Color.Green).padding(20.dp).size(100.dp)) //我们将padding的调用提升至size之前}}}}

由于我们在设置图片的size之前先设置了padding，所以最终Image所占据的宽高都加上了padding的值，就变成了140dp，这也是实际开发中我们最容易疏忽的地方

---

至此，各位看官应该可以比较熟练的运用padding来设置内外边距了，实践大于阅读，一定要去实际使用才能牢固的掌握哦！