Android Jetpack Compose 第一章Layout-第二节-ArrangementCompose交流群2

Compose交流群 235965504

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

Arrangement确定了一个布局中所有孩子的布局方式(是从左边开始摆放,还是从右边开始摆放.....等等)
Jetpack Compose中有两种Arrangement

Vertical
Horizontal

Vertical主要用于Column布局中的布局方式
Horizontal主要用于Row布局中的布局方式

Vertical主要包含了以下布局方式(这些只能在Column布局中使用)

Arrangement.Top
Arrangement.Bottom

Top

即把孩子尽可能的沿顶部对齐

Column(LayoutSize.Fill,arrangement = Arrangement.Top) {
        Box(LayoutSize(200.dp),backgroundColor = Color.Red)
        Box(LayoutSize(200.dp),backgroundColor = Color.Green)
    }

Bottom

即把孩子尽可能的沿底部对齐

Column(LayoutSize.Fill,arrangement = Arrangement.Bottom) {
        Box(LayoutSize(200.dp),backgroundColor = Color.Red)
        Box(LayoutSize(200.dp),backgroundColor = Color.Green)
    }

Horizontal主要包含了以下布局方式(这些只能在Row布局中使用)

Arrangement.Start
Arrangement.End

Start

即把孩子尽可能的沿左边对齐

Row(LayoutSize.Fill,arrangement = Arrangement.Start) {
        Box(LayoutSize(100.dp),backgroundColor = Color.Red)
        Box(LayoutSize(100.dp),backgroundColor = Color.Green)
    }

End

即把孩子尽可能的沿右边对齐

Row(LayoutSize.Fill,arrangement = Arrangement.End) {
        Box(LayoutSize(100.dp),backgroundColor = Color.Red)
        Box(LayoutSize(100.dp),backgroundColor = Color.Green)
    }

Horizontal+Vertical主要包含了以下布局方式(能在Row,Column布局中使用)

Arrangement.SpaceEvenly
Arrangement.SpaceAround
Arrangement.SpaceBetween
Arrangement.Center

SpaceEvenly

孩子均匀分配在轴线上,且第一个孩子的前面的空白位置,最后一个孩子的后面的空白位置与孩子之间的空白位置宽度相等

Row(LayoutSize.Fill,arrangement = Arrangement.SpaceEvenly) {
        Box(LayoutSize(100.dp),backgroundColor = Color.Red)
        Box(LayoutSize(100.dp),backgroundColor = Color.Green)
        Box(LayoutSize(100.dp),backgroundColor = Color.Blue)
    }

SpaceAround

孩子均匀分配在轴线上,且第一个孩子的前面的空白位置,最后一个孩子的后面的空白位置是孩子之间的空白位置的一半宽度

Row(LayoutSize.Fill,arrangement = Arrangement.SpaceAround) {
        Box(LayoutSize(100.dp),backgroundColor = Color.Red)
        Box(LayoutSize(100.dp),backgroundColor = Color.Green)
        Box(LayoutSize(100.dp),backgroundColor = Color.Blue)
    }

SpaceBetween

孩子均匀分配在轴线上,且第一个孩子的前面和最后一个孩子的后面不占据任何空位

Row(LayoutSize.Fill,arrangement = Arrangement.SpaceBetween) {
        Box(LayoutSize(100.dp),backgroundColor = Color.Red)
        Box(LayoutSize(100.dp),backgroundColor = Color.Green)
        Box(LayoutSize(100.dp),backgroundColor = Color.Blue)
    }

Center

孩子在中线上分布,且孩子之间没有任何空白位置

Row(LayoutSize.Fill,arrangement = Arrangement.Center) {
        Box(LayoutSize(100.dp),backgroundColor = Color.Red)
        Box(LayoutSize(100.dp),backgroundColor = Color.Green)
        Box(LayoutSize(100.dp),backgroundColor = Color.Blue)
    }

以上就是所有的Arrangement
下一节讲解Layout布局中的Alignment

Android Jetpack Compose 第一章Layout-第二节-Arrangement