Jetpack Compose布局之Row

基本使用

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

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

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

大小调整

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

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

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

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

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

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

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

内容宽度按比例分配

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

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

horizontalArrangement

horizontalArrangement参数可以设置Row垂直排列的方式：

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

上面的代码中Row里面的内容将垂直居中，Arrangement的值和对应效果如下：

verticalAlignment

verticalAlignment参数可以设置Row的水平对齐方式：

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

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

• Alignment.Top 向顶部对齐
• Alignment.CenterVertically内容居中对齐
• Alignment.Bottom 向底部对齐
  

内容单独设置排列方式

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

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

background

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

Row(
    modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth()
        .background(Color.Red),//设置背景设置为Red
    horizontalArrangement = Arrangement.Center,//设置水平居中对齐
    verticalAlignment =  Alignment.CenterVertically//设置垂直居中对齐
) {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

border

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

Row(
    modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth()
        .background(Color.Red)
        //设置边框的宽度为10dp,颜色为Yellow,设置圆角为20dp
        .border(10.dp, Color.Yellow, RoundedCornerShape(20.dp)),
     horizontalArrangement = Arrangement.Center,//设置水平居中对齐
    verticalAlignment =  Alignment.CenterVertically//设置垂直居中对齐
) {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

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

clip

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

Row(
    modifier = Modifier
        .width(200.dp)
        .height(200.dp)
        .clip(RoundedCornerShape(30.dp))
        .background(Color.Yellow),
    horizontalArrangement = Arrangement.Center,//设置水平居中对齐
    verticalAlignment =  Alignment.CenterVertically//设置垂直居中对齐
) {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

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

clickable

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

Row(
    modifier = Modifier
        .width(200.dp)
        .height(200.dp)
        .clickable {//设置点击事件
            Log.i(TAG_Row, "千里之行，始于足下")
        },
    horizontalArrangement = Arrangement.Center,//设置水平居中对齐
    verticalAlignment =  Alignment.CenterVertically//设置垂直居中对齐
) {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

indication

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

padding

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

Row(
    modifier = Modifier
        .width(200.dp)
        .height(200.dp)
        .clip(RoundedCornerShape(30.dp))
        .background(Color.Yellow)
        .padding(50.dp)
        .clickable {
            Log.i(TAG_Column, "千里之行，始于足下")
        },
    horizontalArrangement = Arrangement.Center,//设置水平居中对齐
    verticalAlignment =  Alignment.CenterVertically//设置垂直居中对齐
) {
    Text(text = "千里之行")
    Text(text = "始于足下")
}

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

horizontalScroll

使用Modifier._horizontalScroll_()可以使Row可以横向滚动：

Row(
    modifier = Modifier
        .width(200.dp)
        .height(200.dp)
        .clip(RoundedCornerShape(30.dp))
        .background(Color.Yellow)
        .padding(50.dp)
        .horizontalScroll(ScrollState(0)),
    horizontalArrangement = Arrangement.Center,//设置水平居中对齐
    verticalAlignment =  Alignment.CenterVertically//设置垂直居中对齐
) {
    Text(text = "千里之行，")
    Text(text = "始于足下。")
    Text(text = "千里之行，")
    Text(text = "始于足下。")
    Text(text = "千里之行，")
    Text(text = "始于足下。")
    Text(text = "千里之行，")
    Text(text = "始于足下。")
}

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