Jetpack Compose ConstraintLayout，Card，BoxWithConstraints，Spacer,Divider用法

这篇文章会讲BoxWithConstraints，Spacer,Divider，Card和ConstraintLayout的用法。

一：Spacer

Spacer其实很简单，就是留白，间隙的作用。看看代码

@Composable
fun Spacer(modifier: Modifier) {
    Layout({}, modifier) { _, constraints ->
        with(constraints) {
            val width = if (hasFixedWidth) maxWidth else 0
            val height = if (hasFixedHeight) maxHeight else 0
            layout(width, height) {}
        }
    }
}

modifier 修饰符 Modifier用法详解举例：

@Preview()
@Composable
fun spacerTest(){
    Column(modifier = Modifier.fillMaxSize()) {
        Box(modifier = Modifier
            .fillMaxWidth()
            .height(60.dp)
            .background(Color.Red))
        Spacer(modifier = Modifier.height(10.dp))
        Box(modifier = Modifier
            .fillMaxWidth()
            .height(60.dp)
            .background(Color.Red))
    }
}

二：Divider

Divider可以作为分隔线。看看代码

@Composable
fun Divider( modifier: Modifier = Modifier, color: Color = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha),
    thickness: Dp = 1.dp,
    startIndent: Dp = 0.dp
)

modifier 修饰符 Modifier用法详解
color 颜色
thickness 线的高度
startIndent 距离开始的间距类似marginStart 举例：

@Preview()
@Composable
fun drivertest(){
    Column(modifier = Modifier.fillMaxSize()) {
        Box(modifier = Modifier
            .fillMaxWidth()
            .height(60.dp)
            .background(Color.Red))
        Divider(
            modifier = Modifier.fillMaxWidth().height(1.dp),
            color = Color.Black,
            startIndent = 10.dp
        )
        Box(modifier = Modifier
            .fillMaxWidth()
            .height(60.dp)
            .background(Color.Red))
    }
}

三：BoxWithConstraints

如需了解来自父项的约束条件并相应地设计布局，您可以使用 BoxWithConstraints。什么意思呢，比如父容器给过来的宽度最大是100.dp, 那我们使用BoxWithConstraints去布局子View的时候，比如子View是30.dp的宽度，我们就可以判断一行里只能显示下3个。来看看代码：

@Composable
fun BoxWithConstraints( modifier: Modifier = Modifier, contentAlignment: Alignment = Alignment.TopStart, propagateMinConstraints: Boolean = false, content: @Composable BoxWithConstraintsScope.() -> Unit ){
   ...
}

modifier 修饰符 Modifier用法详解
contentAlignment 内容的对齐方式
propagateMinConstraints 是否将约束作用于子View上
content 内容举例：

@Preview()
@Composable
fun boxWithConstraintsTest(){
    BoxWithConstraints(
        modifier = Modifier.fillMaxWidth(),
        contentAlignment = Alignment.TopStart,
        propagateMinConstraints = true,
    ){
        val itemW = 50.dp
        val spaceW = 2.dp
        val count = (maxWidth.value/(itemW.value+spaceW.value)).toInt()
        if (count>0) {
            Row() {
                for(i in 0 until count){
                    Box(Modifier.size(50.dp, 50.dp).background(Color.Blue))
                    Spacer(Modifier.size(2.dp))
                }
            }
        }
    }
}

四：Card

卡片，先来看看代码

@Composable
fun Card( modifier: Modifier = Modifier, shape: Shape = MaterialTheme.shapes.medium, backgroundColor: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(backgroundColor),
    border: BorderStroke? = null,
    elevation: Dp = 1.dp,
    content: @Composable () -> Unit
) {
    Surface(
        modifier = modifier,
        shape = shape,
        color = backgroundColor,
        contentColor = contentColor,
        elevation = elevation,
        border = border,
        content = content
    )
}

modifier修饰符
shape 形状
backgroundColor背景颜色
contentColor 内容的颜色
border 边框
elevation 阴影
content 内容举例：

@Preview()
@Composable
fun cardTest(){
    Card(
        modifier = Modifier.size(200.dp).padding(10.dp),
        shape = RoundedCornerShape(8.dp),
        backgroundColor = Color.White,
        contentColor = Color.Black,
        border = BorderStroke(0.5.dp, Color.Gray),
        elevation = 10.dp
    ) {
        Column() {
            Image(painter = painterResource(id = R.drawable.icon_head), contentDescription = "图片",contentScale = ContentScale.FillBounds)
        }
    }
}

五：ConstraintLayout

在 View 系统中，建议使用 ConstraintLayout 来创建复杂的大型布局，因为可以有效的减少布局的层级，从而优化性能。不过，这在 Compose 中，因为它能够高效地处理较深的布局层次结构。所以会更建议去用Cloumn跟Row。不过在实现对齐要求比较复杂的较大布局时，ConstraintLayout 很有用。如需使用 Compose 中的 ConstraintLayout，您需要在 build.gradle 中添加以下依赖项：

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha05"

通过 createRefs() 或 createRefFor() 创建关联的引用。
使用 constrainAs() 修饰符提供的约束条件。
约束条件是使用 linkTo() 或其他有用的方法指定的。
parent 是一个现有的引用，可用于指定对 ConstraintLayout 可组合项本身的约束条件。举例：官网例子 button顶部距离parent顶部16dp，text顶部距离button底部16dp

@Preview()
@Composable
fun constraintTest(){
    ConstraintLayout() {
        val(button,text) = createRefs()
        Button(
            onClick = { /*TODO*/ },
            modifier = Modifier.constrainAs(button){
                top.linkTo(parent.top,margin = 16.dp)
            }
        ) {
            Text("Button")
        }
        
        Text("Text", Modifier.constrainAs(text) {
            top.linkTo(button.bottom, margin = 16.dp)
        })
    }
}

我们来看看ConstraintLayout的代码

ConstraintLayout(
 modifier: Modifier,
 optimizationLevel:Int, 
 content: @Composable(ConstraintLayoutScope.() -> Unit){...}
 
 ConstraintLayout(
 constraintSet: ConstraintSet, 
 modifier: Modifier,
 optimizationLevel:Int, 
 content: @Composable(ConstraintLayoutScope.() -> Unit){...}

constraintSet 约束
optimizationLevel 级别
modifier 修饰符
content内容在上面示例中，约束条件是在放在ConstraintLayout里面指定。不过，在某些情况下，最好将约束条件与应用它们的布局分离开来。例如，您可能会希望根据屏幕配置来更改约束条件，或在两个约束条件集之间添加动画效果。对于此类情况，您可以通过不同的方式使用 ConstraintLayout：
将 ConstraintSet 作为参数传递给 ConstraintLayout。
使用 layoutId 修饰符将在 ConstraintSet 中创建的引用分配给可组合项。

@Preview()
@Composable
fun constraintTest() {
    ConstraintLayout(
        optimizationLevel = 1,
        constraintSet = decoupledConstraints(12.dp)
    ) {
        Button(
            onClick = { /* Do something */ },
            modifier = Modifier.layoutId("button")
        ) {
            Text("Button")
        }
        Text("Text", Modifier.layoutId("text"))
    }
}


private fun decoupledConstraints(margin: Dp): ConstraintSet {
    return ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")

        constrain(button) {
            top.linkTo(parent.top, margin = margin)
        }
        constrain(text) {
            top.linkTo(button.bottom, margin = margin)
        }
    }
}