JetpackCompose从入门到实战学习笔记2——Modifier的简单使用
1.Image的使用：
@Composable
fun Image(modifier: Modifier) {
Row {
Image(
painterResource(id = R.mipmap.iv_pic),
contentDescription = stringResource(R.string.description),
modifier = modifier
.size(60.dp)//宽和高同时设置成60
.clip(CircleShape)//将图片裁剪成圆形
)
//设置间距
Spacer(Modifier.width(20.dp))
Image(
painterResource(id = R.mipmap.iv_pic),
contentDescription = stringResource(R.string.description),
modifier = Modifier
.size(width = 100.dp, height = 100.dp)
.clip(CircleShape)
)
}
}
2.Image的效果如下：
3.Button的使用：
@Composable
fun Button(modifier: Modifier) {
Row {
Spacer(Modifier.width(200.dp))
Text(
text = stringResource(R.string.description),
style = typography.bodySmall.copy(color = Color.White),
textAlign = TextAlign.Center,
modifier =
Modifier
.width(80.dp)
.clickable(onClick = {})
.shadow(3.dp, shape = backgroundShape)
.clip(backgroundShape)
.background(
brush = Brush.verticalGradient(
colors = listOf(
Color.Red,
Color.Blue,
),
startY = 0f,
endY = 80f
)
)
.padding(vertical = 10.dp)
)
}
}
4.Button的效果预览：
5.Background的使用:
@Composable
fun background(modifier: Modifier) {
Row {
Spacer(Modifier.width(300.dp))
Box(
modifier = modifier
.size(100.dp)
.background(color = Color.Red)
)
{
Text(text = "纯色", modifier.align(Alignment.Center))
}
Spacer(Modifier.width(40.dp))
Box(
modifier
.size(150.dp)
.background(brush = verticalGradientBrush)
)
{
Text(text = "渐变色", modifier.align(Alignment.Center))
}
}
}
//创建brush渐变色
private val verticalGradientBrush = Brush.verticalGradient(
colors = listOf(
Color.Red,
Color.Green,
Color.Blue
),
)
6.Background的效果预览：
7.fillMaxSize：
@Composable
fun fillMaxSize(modifier: Modifier) {
Box(
modifier = modifier
.fillMaxSize()//宽高同时铺满屏幕
.background(Color.Red)
)
Box(
modifier = modifier
.fillMaxHeight()
.width(60.dp)//高度铺满屏幕
.background(Color.Blue)
)
Box(
modifier = modifier
.fillMaxWidth()
.height(60.dp)
.background(Color.Green)
)//宽度铺满屏幕
}
8.fillMaxSize的效果预览：
9.padding的使用：
@Composable
fun padding(modifier: Modifier) {
Box(
modifier = modifier
.padding(8.dp)
.border(2.dp, Color.Red, shape = RoundedCornerShape(2.dp))
.padding(8.dp)
)
{
Spacer(
modifier = modifier
.size(width = 200.dp, height = 20.dp)
.background(Color.Red)
)
}
}
10.padding的效果预览：
11.weightModifier的使用：
@Composable
fun weightModifierDemo(modifier : Modifier){
Row {
Spacer(Modifier.width(620.dp))//单个效果时设置为100，整体为620
Column(
modifier = Modifier
.width(300.dp)
.height(200.dp)
) {
Box(
modifier = modifier
.weight(1f)
.fillMaxWidth()
.background(Color.Green)
)
Box(
modifier = modifier
.weight(1f)
.fillMaxWidth()
.background(Color.Blue)
)
Box(
modifier = modifier
.weight(1f)
.fillMaxWidth()
.background(Color.Red)
)
}
}
}
