快捷導(dǎo)航

Android開(kāi)發(fā)Jetpack?Compose元素Modifier特性詳解

更新時(shí)間：2022年10月12日 10:14:22 作者：互聯(lián)網(wǎng)的小學(xué)生

這篇文章主要為大家介紹了Android開(kāi)發(fā)Jetpack?Compose元素Modifier特性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

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

有序性
不可變性

有序性

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

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(shuō)的第一個(gè)有序性。讀者可以觀察兩個(gè)gif圖中水波動(dòng)畫(huà)的作用范圍，可以清楚的看到第一張圖波紋是作用范圍是涵蓋了邊距的而第二張水波動(dòng)畫(huà)的范圍僅僅作用在綠色矩形內(nèi)部。第一段代碼是先設(shè)置的點(diǎn)擊事件而后設(shè)置的邊距，而第二段代碼是先設(shè)置邊距而后設(shè)置了點(diǎn)擊事件，就出現(xiàn)了不同的動(dòng)畫(huà)表現(xiàn)。我們通過(guò)這個(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)
  )
}

到這里本文對(duì)修飾符的特性介紹就結(jié)束了，修飾符還有很多的屬性讀者可以自行嘗試研究，但是無(wú)論設(shè)置什么屬性修飾符都遵循咱們討論的這兩個(gè)屬性。這里附上修飾符的官方文檔鏈接點(diǎn)擊查看Modifier的官方文檔，更多關(guān)于Android Jetpack Compose元素Modifier的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: