Jetpack Compose|聊聊Modifier的特性
highlight: a11y-dark theme: channing-cyan
持續創作，加速成長！這是我參與「掘金日新計劃 · 10 月更文挑戰」的第13天，點擊查看活動詳情
本文將會介紹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的官方文檔
感謝您的閲讀，專注才能提高學習效率，peace!