Android Jetpack Compose 第一章Layout-第四节-LayoutAlign

Icyrockton
1,030 阅读2分钟

Compose交流群 235965504

该系列不会讲解基本的Compose用法 只是用来记录各种API的使用

LayoutAlign也是用于布局定位,与之前介绍的不同的是,它的作用对象可以是一个Layout也可以是一个普通的Component(Box,Text...etc)
LayoutAlign支持以下定位

  • Top
  • CenterVertically
  • Bottom
  • Start
  • CenterHorizontally
  • End
  • TopStart
  • TopCenter
  • TopEnd
  • CenterStart
  • Center
  • CenterEnd
  • BottomStart
  • BottomCenter
  • BottomEnd

作用于布局上

假设我们想要一个居中内容的Container,里面放置了一个Box,根据上一节的知识 可得

Container(alignment = Alignment.Center) {
    Box(LayoutSize(200.dp),backgroundColor = Color.Red)
}

效果图如下

效果图

那么我们这次使用LayoutAlign.Center完成

Container(modifier = LayoutAlign.Center) {
    Box(LayoutSize(200.dp),backgroundColor = Color.Red)
}

效果图
效果是一样的

作用于普通组件(Component)上

一般情况下,若要将LayoutAlign作用于Component,父布局一般使用Stack 先上代码再讲解为什么

Stack {
    Box(LayoutSize(100.dp),backgroundColor = Color.Green)//仅作Bound参考
    Box(LayoutSize.Min(100.dp)+LayoutAlign.Center+LayoutSize(20.dp),backgoundColor = Color.Red)
    }

我们可以看到红色的Box使用了LayoutAlign.Center修饰符,可是它没有对齐在屏幕的中间啊 这是为什么呢? 为什么有两个LayoutSize呢,这不是重复了吗?

先明确一个概念Bound(边界)
我们的第一个LayoutSize.Min 就是用来确定这个Box的边界大小 (是一个正方形 100.dp)

如图所示,也就是粉色勾勒的一圈
哦 那我明白了!! LayoutAlign.Center是以边界(Bound)对齐的! 它居中于边界(Bound) -没错 就是这个意思-
那第三个LayoutSize(20.dp)就很清楚明白了 就是确定正方形的大小的

小明某天用了如下代码

Stack {
    Box(LayoutSize(100.dp),backgroundColor = Color.Green)
    Box(LayoutSize.Min(100.dp)+LayoutSize(20.dp)+LayoutAlign.Center,backgroundColor = Color.Red)
}

第三个LayoutSize(20.dp)与LayoutAlign.Center位置互换
但小明发现红色Box始终不显示

这是为什么呢?
我们首先来分析这三个修饰符(Modifier)的约束(Constraints) 第一节讲过-即最小/大宽度(minWidth/maxWidth) , 最小/大高度(minHeight/maxHeight) LayoutSize.Min(100.dp)+ LayoutSize(20.dp)+LayoutAlign.Center

  • LayoutSize.Min(100.dp)
    Constraints: minWidth = 100dp, maxWidth = infinity, minHeight = 100dp, maxHeight = infinity
  • LayoutSize(20.dp) Constraints: minWidth = 20dp, maxWidth = 20dp, minHeight = 20dp, maxHeight = 20dp
  • LayoutAlign.Center
    分析源码我们可知LayoutAlign.Center会修改约束,并且修改至☞ Constraints: minWidth = 0dp, maxWidth = infinity, minHeight = 0dp, maxHeight = infinity
    根据一般后面添加的约束会覆盖前面的定义的约束的思想
    最终我们得到的约束
    Constraints: minWidth = 0dp, maxWidth = infinity, minHeight = 0dp, maxHeight = infinity
    且由于Box如果只定义了 background color 那它的内在宽度,高度可以被允许小到 0dp x 0dp. 所以为什么小明看不到红色的Box,是因为Box的宽高都是0dp
    之所以前面的示例可以显示红色Box是因为Box的宽高是20dp
    总结:Modifer的修饰符顺序很重要,LayoutAlign会将Constraints修改至0 所以如果你的Component没有显示 很有可能大小是 0dp x 0dp

以上就是所有的LayoutAlign

avatar
文章
阅读
粉丝