JetPack Compose系列之标准布局在 Compose 的布局有Column、Row、Box及Constrain

概述

在Android XML中的常用布局有LinearLayout、RelativeLayout、FrameLayout、ConstraintLayout。相对应的在 Compose 的布局有Column、Row、Box及ConstraintLayout，Compose 中的全新布局控件，能实现高性能及更容易实现自定义布局。

注意：使用 Android View 系统时，在嵌套某些 View（如 RelativeLayout）时，可能会出现一些性能问题。由于 Compose 可以避免多次测量，因此可以根据需要进行深层次嵌套，而不会影响性能。

在Compose中提供了三种标准的布局元素：Column、Row、Box。

Column（纵向布局）

属性介绍

@Composable
inline fun Column(
    //常用属性设置
    modifier: Modifier = Modifier,
    //纵向属性设置
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    //横向属性设置
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    //布局内的子组件
    content: @Composable ColumnScope.() -> Unit
)

纵向使用Arrangement设置:

Arrangement.Top：子view居上显示
Arrangement.Center：子view居中显示
Arrangement.Bottom：子view居下显示
Arrangement.SpaceEvenly：子view均分Column高度显示, 可结合下图区分其效果
Arrangement.SpaceAround：子view均分Column高度显示, 可结合下图区分其效果
Arrangement.SpaceBetween：子view均分Column高度显示, 头部和底部子view贴边显示

横向使用Alignment设置:

Alignment.Start：子view水平方向居左显示
Alignment.CenterHorizontally：子view水平方向居中显示
Alignment.End：子view水平方向居右侧显示

图解 (认真观察理解其区别):

Row（横向布局）

属性介绍

@Composable
@Composable
inline fun Row(
  //常用属性设置
  modifier: Modifier = Modifier,
  //横向属性设置
  horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
  //纵向属性设置
  verticalAlignment: Alignment.Vertical = Alignment.Top,
  //布局内的子组件
  content: @Composable RowScope.() -> Unit
)

横向使用Arrangement设置:

Arrangement.Start：子view水平居左显示
Arrangement.Center：子view水平居中显示
Arrangement.End：子view水平居右显示
Arrangement.SpaceEvenly：子view均分Row水平宽度显示, 可结合下图区分其效果
Arrangement.SpaceAround：子view均分Row水平宽度显示, 可结合下图区分其效果
Arrangement.SpaceBetween：子view均分Row水平宽度显示, 左侧和右侧子view贴边显示

纵向使用Alignment设置:

Alignment.Top：子view垂直方向居上显示
Alignment.CenterHorizontally：子view垂直方向居中显示
Alignment.Bottom：子view垂直方向居下显示

图解 (认真观察理解其区别):

Box 布局

属性介绍

@Composable
inline fun Box(
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content: @Composable BoxScope.() -> Unit
)

使用Alignment设置:

Alignment.TopStart：默认设置属性
Alignment.TopCenter
Alignment.TopEnd
Alignment.CenterStart
Alignment.Center
Alignment.CenterEnd
Alignment.BottomStart
Alignment.BottomCenter
Alignment.BottomEnd

可修改contentAlignment = Alignment.TopStart查看显示效果

@Composable
private fun BoxContaier() {
    Column(modifier = Modifier.fillMaxSize()) {
        Box(
            modifier = Modifier.background(color = Color(R.color.purple_500)),
            contentAlignment = Alignment.TopStart,
        ) {
            TextButton(
                onClick = { /*TODO*/ },
                modifier = Modifier
                    .padding(8.dp)
                    .clip(RoundedCornerShape(10.dp))
                    .width(80.dp)
                    .height(80.dp)
                    .background(color = Color.Green),
            ) {
                Text(text = "One")
            }
            TextButton(
                onClick = { /*TODO*/ },
                modifier = Modifier
                    .padding(60.dp)
                    .clip(RoundedCornerShape(10.dp))
                    .width(80.dp)
                    .height(80.dp)
                    .background(color = Color.White),
            ) {
                Text(text = "Two")
            }

            TextButton(
                onClick = { /*TODO*/ },
                modifier = Modifier
                    .padding(120.dp)
                    .clip(RoundedCornerShape(10.dp))
                    .width(80.dp)
                    .height(80.dp)
                    .background(color = Color.Magenta),
            ) {
                Text(text = "Three")
            }
        }
    }
}

默认效果如下:

知行合一, 最好能按上图效果练习10遍以上, 方能形成手中利剑, 所向披靡。