⼀个例⼦学会使⽤JetpackComposeModifier，kotlin⼊门到精通modifier = Modifier.size(40.dp),
bitmap = imageResource(id = R.drawable.miku),
contentDescription = null, // decorative
)
Column(modifier = Modifier.weight(1f)) {
Text(text = name, maxLines = 1)
Text(text = desc, maxLines = 1)
}
Text(“Follow”, Modifier.padding(6.dp))
}
}
复制代码
接下来，我们⼀步步通过Modifier对其进⾏装饰，在⽂章最后，UI将达到下⾯第⼆张图⽚的效果。
3.1 整体布局
Modifier.padding
我们使⽤Row、Column对Item内的元素进⾏了基本布局，但是元素之间缺少间距
Compose通过Modifier在Composable之间添加Padding
@Composable
fun Decorated() {
Row(
modifier = Modifier
.fillMaxWidth()
.preferredHeightIn(min = 64.dp)
.padding(8.dp) //外间隙
.border(1.dp, Color.LightGray, RoundedCornerShape(4.dp))
.padding(8.dp) //内间隙
) {
…
}
}
复制代码
如上，我们对Item整体添加Padding。 border前后各有⼀个padding，分别表⽰对外和对内的间距。相
对于传统布局有Margin和Padding区分，Modifier中只有padding，根据调⽤链中的位置不同发挥不同作⽤，使⽤更加简单。
Modifier.border
border⽤来定义边框，RoundedCornerShape是⼀个Shape类型，⽤来指定边框的形状为圆⾓矩形。
我们还可以调⽤两次background来实现border的效果：
modifier = Modifier
.background(Color.LightGray)
.padding(1.dp) //两个backgound之间形成边框
.background(Color.White)
复制代码
Modifier.preferredHeight / Modifier.preferredHeightIn
preferedXXX等⽤来设置初始的size，例如preferedHeight可以设置Composable的默认⾼度，这个值可能被其他约束覆盖，若想要⾼度不被覆盖，就使⽤Modifier.height设置固定值
本例中使⽤preferedHeightIn，可以设置minHeight和maxHeight。Modifier.fillMaxWidth
fillMaxWidth表⽰填充整个⽗容器，相当于传统布局的match_parent 3.2 参数中传⼊Modifier
填充Row中的内容，从左往右依次是，头像、⽂字、按钮
@Composable
fun Decorated() {
Row(
modifier = Modifier
.fillMaxWidth()
.preferredHeight(64.dp)
.padding(8.dp)
.border(1.dp, Color.LightGray, RoundedCornerShape(4.dp)) .padding(8.dp)
) {
Avatar( //头像部分
modifier = Modifier
.padding(4.dp)
.align(Alignment.CenterVertically)
)
Info( //⽂字部分
Modifier
.weight(1f)
.align(Alignment.CenterVertically)
)
FollowBtn( //按钮
Modifier.align(Alignment.CenterVertically)
)
}
}
复制代码
我们将具体实现抽成独⽴的Composable，在Row中调⽤并传⼊Modifier。
在Compose中定义Composable时，为Modifier预留参数位置是⼀个好习惯
Modifier为调⽤⽅提供了修改⼦元素样式的机会，但更重要的是有⼀些操作符只能在外部调⽤。
Modifier.align
Modifier的操作符都是扩展函数，并不是定义在⼀起。操作符定义在不同的空间中，可以限制某些操作符只能在特定⽗Comopsable中使⽤，避免误⽤。
interface RowScope {
fun Modifier.align(alignment: Alignment.Vertical)
}
复制代码
如上，align只能在Row中调⽤，⽤来设置⼦元素在垂直⽅向如何对齐。⼦元素不关⼼其在⽗容器中如何对齐，因此在外部设
置align(Alignment.CenterVertically)后，传给⼦元素继续使⽤。
Modifier.weight
weight同样只能在Row中调⽤，为⼦元素分配在Row中的占⽐，类似于LinearLayout的layout_weight。本例中让中间的⽂字部分占据所有所有空间
3.3 头像图⽚
我们对头像图⽚做圆形处理并添加边框，提升整体视觉效果。
@Composablefontweight属性bold
fun Avatar(modifier: Modifier) {
Image(
modifier = modifier
.size(50.dp)
.clip(CircleShape)
.border(
shape = CircleShape,
border = BorderStroke(
width = 2.dp,
brush = Brush.linearGradient(
colors = listOf(blue, teal200, green200, orange),
start = Offset( 0f, 0f),
end = Offset(100f,100f)
)
)
)
.border(
shape = CircleShape,
border = BorderStroke(4.dp, SolidColor(Color.White))
),
bitmap = imageResource(id = R.drawable.miku),
contentDescription = null, // decorative
)
}
复制代码
Modifier.size
⾸先size(50.dp) 设置图⽚的整体⼤⼩
Modifier.clip
clip⽤来将图⽚裁剪成指定形状，例⼦中clip(CircleShape)将图⽚裁剪成圆形
Modifier.border调⽤顺序
图⽚的边框由两部分组成，外层带颜⾊的部分，和内层的⽩⾊边框，因此调⽤链中出现了两个border()。两个border的调⽤顺序需要特备注意，border表⽰为后⾯的调⽤添加边框，所以在前⾯调⽤的后⽣效。所以例⼦中的border调⽤顺序如下：
Modifier
.border() //2dp 颜⾊边框
.border() //4dp ⽩⾊边框
复制代码
BorderStroke & Brush
border使⽤BorderStroke填充边框颜⾊。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。