学胖子的个人博客

Jetpack Compose学习 Modifier

发表于 更新于 分类于 ，

Jetpack Compose学习 -------- Modifier

padding 设置各个UI的padding

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 给上下左右全部设置成同一个值
Modifier.padding(10.dp)
// 分别为左（开始）、上（上）、右（结束）、下（下）设值
Modifier.padding(10.dp, 20.dp, 30.dp, 40.dp)
// 分别为左右（水平）和上下（垂直）设值
Modifier.padding(10.dp, 20.dp)
//PaddingValues 与 padding 不一样
// 给上下左右全部设置成同一个值
Modifier.padding(PaddingValues(10.dp))
// 分别为左右（水平）和上下（垂直）设值
Modifier.padding(PaddingValues(10.dp, 20.dp))
//分别为左（开始）、上（上）、右（结束）、下（下）设值
Modifier.padding(PaddingValues(10.dp, 20.dp, 30.dp, 40.dp))

fillMaxHeight,fillMaxWidth,fillMaxSize 类似于match_parent,填充整个父layout

1
2
3
4
5
6
7
8

//填充整个父Layout
Modifier.fillMaxSize()
//填充整个父Layout的宽度
Modifier.fillMaxWidth()
//填充整个父Layout的高度
Modifier.fillMaxHeight()

width,heigh,size 设置Content的宽度和高度

1
2
3
4
5
6
7
8
9
10

//设置宽度
Modifier.width(80.dp)
//设置高度
Modifier.height(80.dp)
//设置 宽度和高度
Modifier.size(100.dp)
//设置 宽度,高度
Modifier.size(100.dp, 100.dp)

widthIn, heightIn, sizeIn 设置Content的宽度和高度的最大值和最小值

1
2
3
4
5
6
7
8

//设置 最小宽度 最大宽度
Modifier.widthIn(20.dp, 50.dp)
//设置 最小高度 最大高度
Modifier.heightIn(20.dp, 50.dp)
//设置 最小宽度,最小高度,最大宽度,最大高度
Modifier.sizeIn(20.dp, 20.dp, 50.dp, 50.dp)

wrapContentHeight,wrapContentWidth,wrapContentSize,

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
27
28
29
30
31
32
33
34

// 高度 位于 顶部
Modifier.wrapContentHeight(Alignment.Top)
// 高度 位于 底部
Modifier.wrapContentHeight(Alignment.Bottom)
// 高度 位于 垂直居中
Modifier.wrapContentHeight(Alignment.CenterVertically)
// 高度 位于 水平居中
Modifier.wrapContentHeight(Alignment.CenterHorizontally)
// 宽度 位于 开始（左）
Modifier.wrapContentWidth(Alignment.Start)
// 宽度 位于 结束（右）
Modifier.wrapContentWidth(Alignment.End)
// 宽度 位于 水平居中
Modifier.wrapContentWidth(Alignment.CenterHorizontally)
// 宽度 位于 垂直居中
Modifier.wrapContentWidth(Alignment.CenterVertically)
//位置 位于 顶部 开始（左）
Modifier.wrapContentSize(Alignment.TopStart)
//位置 位于 顶部 结束（右）
Modifier.wrapContentSize(Alignment.TopEnd)
//位置 位于 顶部 水平居中
Modifier.wrapContentSize(Alignment.TopCenter)
//位置 位于 底部 开始（左）
Modifier.wrapContentSize(Alignment.BottomStart)
//位置 位于 底部 结束（右）
Modifier.wrapContentSize(Alignment.BottomEnd)
//位置 位于 底部 水平居中
Modifier.wrapContentSize(Alignment.BottomCenter)
//位置 位于 垂直居中 开始（左）
Modifier.wrapContentSize(Alignment.CenterStart)
//位置 位于 垂直居中 结束（右）
Modifier.wrapContentSize(Alignment.CenterEnd)