Jetpack Compose：Modifier 修饰符

Modifier 可以通过链式调用的写法来为组件应用一系列的样式，每个基础的 Composable 组件都有一个 modifier 属性。

Ⅰ.常用修饰符

本章节记录一些常用的预置 Modifier 修饰符，对所有 Composable 组件通用。

1.Modifier.size

size 修饰符用来设置组件大小，代码如下所示：

Row {
	Image(
    	painterResource(id = R.drawable.t),
        contentDescription = null,
        modifier = Modifier
        	// 单独设置宽高
            .size(
            	width = 120.dp, height = 120.dp
            )
            .clip(CircleShape)
	)

	Image(
		painterResource(id = R.drawable.t),
        contentDescription = null,
        modifier = Modifier
        	// 统一设置宽高
            .size(80.dp)
            .clip(CircleShape)
	)
}

2.Modifier.background

background 修饰符用来给修饰组件添加背景色，可以设置纯色和渐变色背景。

Row {
	Box (
		modifier = Modifier
			.padding(10.dp)
        	// 纯色背景
            .background(color = Color.Red)
            .padding(10.dp)
	) {
		Text(text = "纯色背景")
	}
    
	// 创建渐变色
	val verticalGradientBrush = Brush.verticalGradient(
		colors = listOf(
        	Color.Red,
            Color.Yellow,
            Color.Blue
        )
	)

	Box (
		modifier = Modifier
            .padding(10.dp)
        	// 渐变色背景
            .background(brush = verticalGradientBrush)
            .padding(10.dp)
	) {
		Text(text = "渐变背景")
	}
}

3.Modifier.fillMaxXXX

fillMaxXXX 系列修饰符用来让组件在宽高上填满父空间

Row {
	Box (
		modifier = Modifier
            .background(Color.Red)
            // 填满整个父空间
            .fillMaxSize()
	) {
		Text(
			text = "填满整个父空间",
			modifier = Modifier.align(Alignment.Center),
			color = Color.White
		)
	}
}

Row {
	Box (
		modifier = Modifier
            .background(Color.Gray)
            // 高度填满整个父空间
            .fillMaxHeight()
	) {
		Text(
			text = "高度填满整个父空间",
			modifier = Modifier.align(Alignment.Center),
			color = Color.White
		)
	}
}

Row {
	Box (
		modifier = Modifier
			.padding(0.dp)
            .background(Color.Blue)
            // 宽度填满整个父空间
            .fillMaxWidth()
            .padding(10.dp)
	) {
		Text(
			text = "宽度填满整个父空间",
			modifier = Modifier.align(Alignment.Center),
			color = Color.White
		)
	}
}

4. Modifier.border

border 修饰符用来为组件添加边框，边框可以指定颜色、粗细、以及形状。

Row {
	Box (
		modifier = Modifier
			.padding(0.dp)
			// 设置边框
			.border(5.dp, Color.Red, shape = RoundedCornerShape(2.dp))
            .background(Color.Blue)
            .fillMaxWidth()
            .padding(10.dp)
	) {
		Text(
			text = "宽度填满整个父空间",
			modifier = Modifier.align(Alignment.Center),
			color = Color.White
		)
	}
}

5.Modifier.padding

padding 修饰符可以用来给组件添加外边距和内边距，padding 根据在不同位置发挥不同作用，体现了 Modifier 链式调用的特点。0

Row {
	Box (
		modifier = Modifier
			// 外边距
			.padding(20.dp)
            .border(2.dp, Color.Blue, shape = RoundedCornerShape(20.dp))
            // 内边距
            .padding(10.dp)
	) {
		Text("边距")
	}
}

6.Modifier.offset

offset 修饰符用来移动组件的位置。

Row {
	Box (
		modifier = Modifier
            .size(100.dp)
            .background(Color.Red)
	)

	Box (
		modifier = Modifier
            .size(100.dp)
        	// 因为 Modifier 是链式调用，所以应先移动再设置设置背景色
            .offset(x = 150.dp, y = 75.dp)
            .background(Color.Blue)
		)
}