日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

Android開發Jetpack?Compose元素Modifier特性詳解_Android

作者:互聯網的小學生 ? 更新時間: 2022-11-23 編程語言

正文

本文將會介紹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)
  )
}

原文鏈接:https://juejin.cn/post/7153189769147580446

欄目分類
最近更新