Jetpack Compose布局之Column

基本使用

Column纵向线性布局，类似于LinearLayout设置为android:orientation="vertical"时的效果：

Column() {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

上方两个Text将按照垂直排列布局，Column默认大小为内部子控件的大小，类似于wrap_content

大小调整

可以使用modifier来设置Column的大小：

Column(modifier = Modifier
    .height(200.dp)
    .width(200.dp)) {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

上面的代码设置了Column的大小为 200dp * 200dp

Column(
    modifier = Modifier.size(300.dp, 200.dp)
) {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

上面的代码使用Modifier.size(width,height)来设置Column的大小

Column(
    modifier = Modifier.fillMaxHeight().fillMaxWidth()
) {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

上面的代码使用Modifier.fillMaxHeight().fillMaxWidth()来设置Column的大小，此时Column将填充父控件的剩余大小，类似于match_parent 。可以直接使用Modifier.fillMaxSize()来直接设置

内容高度按比例分配

Column(
    modifier = Modifier.fillMaxSize()
) {
    Text(text = "千里之行",Modifier.weight(1f))
    Text(text = "始于足下",Modifier.weight(1f))
}

可以使用Modifier.weight(1f)来设置内容高度的比例，Modifier.weight()只在Column和Row里面存在

verticalArrangement

verticalArrangement参数可以设置Column垂直排列的方式：

Column(
    modifier = Modifier.fillMaxHeight().fillMaxWidth(),
    verticalArrangement = Arrangement.Center
) {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

上面的代码中Column里面的内容将垂直居中，Arrangement的值和对应效果如下：
在这里插入图片描述

Arrangement.EqualWeight 内容撑满Column的高度，每个组件的高度平分Column的高度
Arrangement.SpaceBetween 内容撑满Column的高度，最上方和最下方的组件紧靠Column，组件与组件之间的间距会平分剩余高度
Arrangement.SpaceAround 内容撑满Column的高度，最上方和最下方的组件与Column的间距是组件与组件直接的间距的一半
Arrangement.SpaceEvenly 内容撑满Column的高度，组件与组件之间的间距会平分剩余高度
Arrangement.Top 内容对齐到Column的最上方
Arrangement.Center 内容居中对齐
Arrangement.Bottom 内容对齐到Column的最下方

horizontalAlignment

horizontalAlignment参数可以设置Column的水平对齐方式：

Column(
    modifier = Modifier.fillMaxHeight().fillMaxWidth(),
    verticalArrangement = Arrangement.Center,//设置垂直居中对齐
    horizontalAlignment =  Alignment.CenterHorizontally//设置水平居中对齐
) {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

上面的代码中Column里面的内容将垂直水平都居中，horizontalAlignment的值有三种：

Alignment.Start 向内容开始的方向对齐，一般为左边
Alignment.CenterHorizontally 内容居中对齐
Alignment.End 向内容结束的方向对齐，一般为右边

内容单独设置排列方式

	Column(
        modifier = Modifier.fillMaxHeight().fillMaxWidth(),
        verticalArrangement = Arrangement.Center,//设置垂直居中对齐
        horizontalAlignment =  Alignment.CenterHorizontally//设置水平居中对齐
    ) {
        Text(text = "千里之行",Modifier.align(Alignment.Start))
        Text(text = "始于足下")
    }

可以使用Modifier.align(Alignment.Start)来单独设置Column里面某个组件水平的对齐方式，Modifier.align()会优先horizontalAlignment指定的对齐方式。

background

背景色的设置使用的是modifier，使用Modifier.background来设置：

Column(
    modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth()
        .background(Color.Red),//设置背景设置为Red
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

border

边框的设置同样使用的是modifier，使用Modifier._border_来设置：

Column(
    modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth()
        .background(Color.Red)
        //设置边框的宽度为10dp,颜色为Yellow,设置圆角为20dp
        .border(10.dp, Color.Yellow, RoundedCornerShape(20.dp)),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

注：使用RoundedCornerShape(topStart,topEnd,bottomEnd,bottomStart)可以分别设置四个角的圆角角度；

clip

使用Modifier.clip()可以设置圆角：

Column(
    modifier = Modifier
        .width(200.dp)
        .height(200.dp)
        .clip(RoundedCornerShape(30.dp))
        .background(Color.Yellow),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

注：clip(RoundedCornerShape(30.dp))的设置需要在background设置前面才会生效；

clickable

使用Modifier.clickble()可以设置点击事件：

Column(
    modifier = Modifier
        .width(200.dp)
        .height(200.dp)
        .clickable {//设置点击事件
            Log.i(TAG_Column, "千里之行，始于足下")
        },
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

indication

indication可以设置点击效果，它的使用方式和Button是一致的，详细可以查看Button interractionSourrce

padding

使用Modifier.padding()可以设置Column的内边距，Compose没有设置外边距的参数：

Column(
    modifier = Modifier
        .width(200.dp)
        .height(200.dp)
        .clip(RoundedCornerShape(30.dp))
        .background(Color.Yellow)
        .padding(50.dp)
        .clickable {
            Log.i(TAG_Column, "千里之行，始于足下")
        },

    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

padding可以设置所有边距，也可以设置每个位置的边距。
注意：如果padding在clickable前面，那么内边距的位置是不可以点击，如果在clickable后面，那么内边距的位置也会响应点击事件，所以modifier是有顺序。

verticalScroll

使用Modifier.verticalScroll()可以使Column可以滚动：

Column(
    modifier = Modifier
        .width(200.dp)
        .height(200.dp)
        .clip(RoundedCornerShape(30.dp))
        .background(Color.Yellow)
        .padding(50.dp)
        .verticalScroll(ScrollState(0)),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(text = "千里之行")
    Text(text = "始于足下")
    Text(text = "千里之行")
    Text(text = "始于足下")
    Text(text = "千里之行")
    Text(text = "始于足下")
    Text(text = "千里之行")
    Text(text = "始于足下")
}

verticalScroll接收一个ScrollState，创建ScrollState需要设置一个initial，就是初始位置，如果设置成 100 ，那么Column初始显示的时候，会滚动到 100 的位置；
Compose给我提供了一个专门用来显示可滚动Column的View：LazyColumn，可用用它来实现类似ListView和RecyclerView的功能。