正文

本文將會(huì)介紹Jetpack Compose中的Modifier。在谷歌官方文檔中它的描述是這么一句話：Modifier元素是一個(gè)有序、不可變的集合，它可以往Jetpack Compose UI元素中添加修飾或者各種行為。例如，背景、填充和單擊事件監(jiān)聽器裝飾或添加行為到文本或按鈕。本文將會(huì)從修飾符的兩個(gè)特性有序和不可變入手來探究修飾符的應(yīng)用，以下是本文目錄：

• 有序性
• 不可變性

有序性

官方對(duì)修飾符定義的這個(gè)特性包含兩個(gè)層面的意思，一是修飾符的使用是鏈?zhǔn)降乃怯邢群笈帕许樞虻模沁@些順序不僅僅是排列上的先后同時(shí)也是屬性對(duì)UI展示效果起作用的先后順序。接下來舉一個(gè)例子來說明修飾符的有序的特性。

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)
    )
}

上面兩段代碼的意思都是在一個(gè)綠色背景寬高為50,50的Box控件中設(shè)置點(diǎn)擊事件和Padding。首先我們可以直觀的看到修飾符的使用是鏈?zhǔn)降姆显蹅冋f的第一個(gè)有序性。讀者可以觀察兩個(gè)gif圖中水波動(dòng)畫的作用范圍，可以清楚的看到第一張圖波紋是作用范圍是涵蓋了邊距的而第二張水波動(dòng)畫的范圍僅僅作用在綠色矩形內(nèi)部。第一段代碼是先設(shè)置的點(diǎn)擊事件而后設(shè)置的邊距，而第二段代碼是先設(shè)置邊距而后設(shè)置了點(diǎn)擊事件，就出現(xiàn)了不同的動(dòng)畫表現(xiàn)。我們通過這個(gè)例子就可以直觀的看到修飾符的第二個(gè)有序性，也就是修飾屬性對(duì)于UI展示作用的有序性，即屬性發(fā)生作用的先后順序和設(shè)置順序是一致的。

不可變性

對(duì)于修飾符的不可變性筆者認(rèn)為就是當(dāng)設(shè)置的屬性值確定時(shí)，被修飾的UI就確定了不會(huì)再變了。下面就展示一個(gè)位于屏幕中心，背景為綠色，旋轉(zhuǎn)45度，寬度等比例拉伸2倍的正方形。

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