Compose 组件 - 一些布局类型

val coroutineScope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = { SnackbarHost(
        hostState = snackbarHostState,
//            snackbar = {}     //自定义动作条界面，会覆盖下方showSnackbar中设置的内容和点击监听
    ) }
) {
    Box(
        modifier = Modifier.padding(it).fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Button(
            onClick = {
                coroutineScope.launch {
                    snackbarHostState.showSnackbar(
                        message = "动作条文本内容",
                        actionLabel = "操作按钮",
                        withDismissAction = true,   //是否显示关闭按钮
                        duration = SnackbarDuration.Short    //Short、Long、Indefinite
                    ).let {
                        when (it) {
                            //动作条自动消失
                            SnackbarResult.Dismissed -> {}
                            //用户点击了操作按钮
                            SnackbarResult.ActionPerformed -> {}
                        }
                    }
                }
            }
        ) { Text("弹出") }
    }
}

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

@Composable
inline fun ConstraintLayout(
    modifier: Modifier = Modifier,
    optimizationLevel: Int = Optimizer.OPTIMIZATION_STANDARD,
    crossinline content: @Composable ConstraintLayoutScope.() -> Unit
)

fun Modifier.constrainAs(
    ref: ConstrainedLayoutReference,    //指定绑定的引用
    //提供现有参数start、top、end、bottom表示当前组合函数的上下左右四边，调用linkTo()指定该边的约束
    constrainBlock: ConstrainScope.() -> Unit    //设置约束条件
)

fun linkTo(
    //指定连接到哪里，parent指ConstraintLayout（如）
    anchor: ConstraintLayoutBaseScope.***Anchor,
    margin: Dp = 0.dp,
    goneMargin: Dp = 0.dp
)

@Composable
fun MyConstraintLayout() {
    ConstraintLayout {
        //为每个子元素创建引用
        val (buttonRef, textRef) = createRefs()
        Button(
            onClick = { /* Do something */ },
            //将组合函数和引用关联
            modifier = Modifier.constrainAs(buttonRef) {
                //指定约束条件，现有引用parent是指ConstraintLayout
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text("Button")
        }
        Text(
            text = "Text",
            Modifier.constrainAs(textRef) {
                top.linkTo(buttonRef.bottom, margin = 16.dp)
                //centerAround(button1.end)    //自己中间对齐谁的哪边
                centerHorizontallyTo(parent)    //水平居中
            }
        )
    }
}

@Composable
fun MyBarrier() {
    ConstraintLayout {
        val (button1, button2, text) = createRefs()
        Button(onClick = { }, modifier = Modifier.constrainAs(button1) {
            top.linkTo(parent.top, margin = 16.dp)
        }) {
            Text(text = "Button1")
        }
        Text(text = "Text", modifier = Modifier.constrainAs(text) {
            top.linkTo(button1.bottom, margin = 16.dp)
            centerAround(button1.end)    //自己中间对齐谁的哪边
        })
        val barrier = createEndBarrier(button1, text)   //将button1和text组合成一个Barrier
        Button(onClick = { }, modifier = Modifier.constrainAs(button2) {
            top.linkTo(parent.top, margin = 16.dp)
            start.linkTo(barrier)
        }) {
            Text(text = "Button2")
        }
    }
}

@Composable
fun MyGuideline() {
    ConstraintLayout {
        val text = createRef()
        val guideline = createGuidelineFromStart(fraction = 0.5f)
        Text(
            text = "Hellow Wodr!Hellow Wodr!Hellow Wodr!Hellow Wodr!Hellow Wodr!Hellow Wodr!Hellow Wodr!",
            modifier = Modifier.constrainAs(text) {
                linkTo(start = guideline, end = parent.end)
                //默认允许子元素超出屏幕，所以这里要设置一下
                width = Dimension.preferredWrapContent
            }
        )
    }
}

@Composable
fun MyChain() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (box1, box2, box3) = createRefs()
        createHorizontalChain(box1, box2, box3, chainStyle = ChainStyle.Spread)
        Box(modifier = Modifier.size(100.dp).background(Color.Red).constrainAs(box1) {})
        Box(modifier = Modifier.size(100.dp).background(Color.Green).constrainAs(box2) {})
        Box(modifier = Modifier.size(100.dp).background(Color.Blue).constrainAs(box3) {})
    }
}

@Composable
fun Before() {
    val margin = 16.dp
    ConstraintLayout {
        val (button, text) = createRefs()
        Button(onClick = {}, modifier = Modifier.constrainAs(button) {
            top.linkTo(parent.top, margin = margin)
        }) {
            Text(text = "Button")
        }
        Text(text = "Text", modifier = Modifier.constrainAs(text) {
            top.linkTo(button.bottom, margin = margin)
        })
    }
}
//外部定义约束集
private fun myContraints(margin: Dp) = ConstraintSet {
    //创建引用
    val button = createRefFor(id = "button")
    val text = createRefFor(id = "text")
    //配置约束条件
    constrain(button) {
        top.linkTo(parent.top, margin)
    }
    constrain(text) {
        top.linkTo(button.bottom, margin)
    }
}
@Composable
fun after() {
    //该组合项提供的现有参数可用来根据可用空间调用不同的可组合项（屏幕适配）
    //单位dp的参数：minWidth、minHeight、maxWidth、maxHeight
    //单位px的参数：constraints.maxWidth
    BoxWithConstraints {
        //根据竖屏横屏返回不同的值
        val margin = if (maxWidth < maxHeight) myContraints(16.dp) else myContraints(20.dp)
        //传入约束集使用
        ConstraintLayout(margin) {
            //子元素设置约束集中对应的引用
            Button(onClick = {}, modifier = Modifier.layoutId("button")) {
                Text(text = "Button")
            }
            Text(text = "Text", modifier = Modifier.layoutId("text"))
        }
    }
}