Android开发Jetpack Compose元素Modifier特性详解

正文

本文将会介绍Jetpack Compose中的Modifier。在谷歌官方文档中它的描述是这么一句话：Modifier元素是一个有序、不可变的集合，它可以往Jetpack Compose UI元素中添加修饰或者各种行为。例如，背景、填充和单击事件监听器装饰或添加行为到文本或按钮。本文将会从修饰符的两个特性有序和不可变入手来探究修饰符的应用，以下是本文目录：

• 有序性
• 不可变性

有序性

官方对修饰符定义的这个特性包含两个层面的意思，一是修饰符的使用是链式的它是有先后排列顺序的，二是这些顺序不仅仅是排列上的先后同时也是属性对UI展示效果起作用的先后顺序。接下来举一个例子来说明修饰符的有序的特性。

Box {
  val padding = 16.dp
  val onClick = Unit;
  Box(
      Modifier
          .clickable(onClick = { onClick })
          .padding(padding)
          .align(Alignment.Center)
          .size(50.dp, 50.dp)
          .background(Color.Green)
  )
}

Box {
    val padding = 16.dp
    val onClick = Unit;
    Box(
        Modifier
            .padding(padding)
            .clickable(onClick = { onClick })
            .align(Alignment.Center)
            .size(50.dp, 50.dp)
            .background(Color.Green)
    )
}

上面两段代码的意思都是在一个绿色背景宽高为50,50的Box控件中设置点击事件和Padding。首先我们可以直观的看到修饰符的使用是链式的符合咱们说的第一个有序性。读者可以观察两个gif图中水波动画的作用范围，可以清楚的看到第一张图波纹是作用范围是涵盖了边距的而第二张水波动画的范围仅仅作用在绿色矩形内部。第一段代码是先设置的点击事件而后设置的边距，而第二段代码是先设置边距而后设置了点击事件，就出现了不同的动画表现。我们通过这个例子就可以直观的看到修饰符的第二个有序性，也就是修饰属性对于UI展示作用的有序性，即属性发生作用的先后顺序和设置顺序是一致的。

不可变性

对于修饰符的不可变性笔者认为就是当设置的属性值确定时，被修饰的UI就确定了不会再变了。下面就展示一个位于屏幕中心，背景为绿色，旋转45度，宽度等比例拉伸2倍的正方形。

Box {
  Box(
      Modifier
          .rotate(45f)
          .scale(2f)
          .align(Alignment.Center)
          .size(50.dp, 50.dp)
          .background(Color.Green)
  )
}

到这里本文对修饰符的特性介绍就结束了，修饰符还有很多的属性读者可以自行尝试研究，但是无论设置什么属性修饰符都遵循咱们讨论的这两个属性。这里附上修饰符的官方文档链接点击查看Modifier的官方文档，更多关于Android Jetpack Compose元素Modifier的资料请关注脚本之家其它相关文章！