一:简介
您将学习如何使用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)) {
第一种先裁剪,在设置背景;第二种设置一个裁剪后的背景。