安卓kotlinJetpack Compose
定西Compose API 设计原则
视图树一旦生成便不可随意改变，视图的刷新依靠Composable函数的反复执行来实现
+composable函数只能在composeable函数中调用
+在Compose的世界中,一切组件都是函数,由于没有类的概念,因此不会有任何继承的层次结构,所有组件都是顶层函数
+可以在DSL中直接调用
+Composable作为函数相互没有继承关系,有利于促使开发者使用组合的视角去思考问题
+基本概念啥的都有点不太一样，和之前学的
+常用UI组件
Compose提供了Column,Row,Box三种布局组件,类似于传统视图中的LinearLayout(Vertical),LinearLayout(Horizontal),RelativeLayout
+Modifier修饰符
Modifier允许我们同诺链式调用的写法来为组件应用一系列的样式设置,如边距,字体,位移等,在Compose中,每个基础的Composable组件都有一个modifier参数,通过传入自定义的Modifier来修改组件的样式
+
+- size
+
+
+设置组件大小
+
+1
2
3
4
5
6
7
8
9
10
11
12
13
14
| Image(
painterResource(id = R.drawable.shiguang2),
contentDescription = null,
modifier = Modifier
.size(100.dp)
.clip(CircleShape)
)
Image(
painterResource(id = R.drawable.shiguang2),
contentDescription = null,
modifier = Modifier
.size(width = 200.dp, height = 500.dp)
)
|
+- background
+
+
+用来为修饰组件添加背景色,背景色支持设置color的纯色背景也可以使用brush设置渐变色背景,Brush是Compose提供的用来创建线性渐变色的工具
+
+1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| Row {
Box(
Modifier
.size(50.dp)
.background(color = Color.Red)
) {
Text("纯色", Modifier.align(Alignment.Center))
}
Spacer(modifier = Modifier.width(16.dp))
Box(
Modifier
.size(50.dp)
.background(brush = verticalGradientBrush)
) {
Text("渐变色", Modifier.align(Alignment.Center))
}
}
val verticalGradientBrush = Brush.verticalGradient(
colors = listOf(
Color.Red,
Color.Yellow,
Color.Green
)
)
|
传统视图中的View的background属性可以用来设置图片格式的背景，但是这里是不支持的，Compose的background只能设置颜色背景
+
+- fillMaxSize
+
+
+size可以控制组件的大小，而fillMaxSize可以让组件在高度或者宽度上填满父空间，此时可以用fillMaxSize
+
+1
2
3
4
5
6
7
8
9
10
11
12
13
| Row(
Modifier.background(Color.Yellow).width(100.dp).height(200.dp)
) {
Box(
Modifier.fillMaxWidth().height(50.dp).background(Color.Blue)
)
}
|
+- border&padding
+
+
+border用来为被修饰组件添加边框，边框可以指定颜色，粗细，以及通过Shape指定形状，比如圆角矩形等，padding用来为被修饰组件增加间隙，可以在border前后各插入一个padding，区分对外和对内的比间距
+
+1
2
3
4
5
6
7
8
9
10
11
12
| Box(
modifier = Modifier
.padding(8.dp)
.border(2.dp, Color.Red, shape = RoundedCornerShape(2.dp))
.padding(8.dp)
){
Spacer(
Modifier
.size(width = 100.dp, height = 10.dp)
.background(Color.Red)
)
}
|
+相对于传统布局有Margin和Padding之分，Compose中只有padding这一种修饰符，根据在调用链的位置不同发挥不同的作用，概念更加简洁
+
+- offset
+
+
+offset修饰符用来移动被修饰组件的位置,我们在使用时只分别传入水平方向与垂直方向的偏移量
+
+Modifier调用顺序会影响最终UI呈现的效果,这里应使用offset修饰符偏移,再使用background修饰符绘制背景色
+
