Jetpack Compose的Layouts

一：简介

您将学习如何使用Compose的最高层次的UI抽象，Material Design，以及低级的可组合工具，如Layout，它允许您测量并在屏幕上放置元素。

二：Modifier

1：设置文本的透明度

CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
            Text("3 minutes ago", style = MaterialTheme.typography.body2)
        }

2：指明Surface等控件的大小

 modifier = Modifier.size(50.dp)

3：Modifiers 和 XML attribute的区别

Modifiers和XML attribute类似，但是Modifiers具有作用域的类型安全检查，一些无效的modifiers不能在一些layouts上使用

4：设置一个modifier在形参的一号位

If you're creating your own composable, consider having a modifier as a parameter, default it to Modifier (i.e. empty modifier that doesn't do anything) and apply it to the root composable of your function. In this case:

@Composable
fun PhotographerCard(modifier: Modifier = Modifier) {
    Row(modifier) { ... }
}

Note: By convention, the modifier is specified as the first optional parameter of a function. This enables you to specify a modifier on a composable without having to name all parameters.

5：Modifier的顺序有影响

看一个例子：

Surface (color = if (color_state.value == 1) Color.Green else Color.Blue){
            Column(modifier = Modifier
                .padding(5.dp)
                .clickable { color_state.value = -color_state.value }
                .align(Alignment.CenterVertically)) {

                ...
                }
            }
        }

column先在周围创建了空隙padding，再创建了点击事件clickable，这个时候clickable在padding之间是无效的。但是，clickable放在padding前面就可以把padding的范围也包括进去。

6：背景的圆角

想要把背景设置成圆角，看来有两种方案：

1:
Row(modifier = Modifier
        .padding(8.dp)
        .clip(RoundedCornerShape(4.dp))
        .background(MaterialTheme.colors.surface)
        .padding(16.dp)) {
...
}

2:
Row(modifier = Modifier
        .padding(8.dp)
        .background(MaterialTheme.colors.surface, Shapes.medium)
        .padding(16.dp)) {

第一种先裁剪，在设置背景；第二种设置一个裁剪后的背景。