时间戳

首页 > 解决方案 > Jetpack Compose - 修饰符的顺序

android - Jetpack Compose - 修饰符的顺序

问题描述

文档说修饰符是从左侧应用的。但从这个例子来看，它们似乎是从右边应用的：第一个边框，然后是填充，因为文本和边框之间没有空格

Text("Hi there!", Modifier.padding(10.dp).border(2.dp, Color.Magenta))

在此处输入图像描述

标签： androidandroid-jetpackandroid-jetpack-composemodifier

解决方案

Jetpack Compose codelab 中的Layouts 包含在 hood步骤下的 Layout 修饰符，它解释了修饰符的顺序，请参阅“顺序很重要”部分。

链接修饰符时，顺序很重要，因为它们从早到晚被应用于它们修改的可组合对象，这意味着左侧修饰符的测量和布局将影响右侧的修饰符。可组合的最终大小取决于作为参数传递的所有修饰符。首先，修饰符将从左到右更新约束，然后，它们从右到左返回大小。

为了更好地理解它，我建议弄清楚布局在 Compose 中是如何工作的。简而言之，padding()是一个LayoutModifer，它接受一些约束，根据该约束的投影测量其子大小，并将子放置在某个坐标处。

让我们看一个例子：

Box(
  modifier = Modifier
    .border(1.dp, Color.Red)
    .size(32.dp)
    .padding(8.dp)
    .border(1.dp, Color.Blue)
)

结果：

在此处输入图像描述

但是让我们交换.size()和.padding()

Box(
  modifier = Modifier
    .border(1.dp, Color.Red)
    .padding(8.dp)
    .size(32.dp)
    .border(1.dp, Color.Blue)
)

现在我们得到了不同的结果：

在此处输入图像描述

我希望这个示例可以帮助您弄清楚修饰符是如何应用的。

可以预期，红色边框应该是最接近盒子的，因为它是最先添加的，所以顺序可能看起来颠倒了，但这样的顺序也有优点。让我们看一下这个可组合的：

@Composable
fun MyFancyButton(modifier: Modifier = Modifier) {
  Text(
    text = "Ok",
    modifier = modifier
      .clickable(onClick = { /*do something*/ })
      .background(Color.Blue, RoundedCornerShape(4.dp))
      .padding(8.dp)
  )
}

只需将 移动modifier到参数，可组合项就允许其父级添加额外的修饰符，例如额外的边距。因为最后添加的修饰符离按钮最近，所以边框和内部填充不会受到影响。

推荐阅读