iT邦幫忙

2024 iThome 鐵人賽
DAY 4
0
Mobile Development

從零開始學習 Jetpack Compose系列 第 4 篇

從零開始學習 Jetpack Compose Day3 - Modifier

16th鐵人賽
67 瀏覽

  • 分享至 

  • xImage
    •  

Modifier

根據官方文件說明修飾符可以做這些事：

  • 可調整Composable的大小、佈局、行為和外觀
  • 新增訊息，例如輔助使用標籤
  • 處理使用者輸入
  • 新增進階交互，例如使元素可點擊、可捲動、可拖曳或可縮放

例如以下範例：

  • size設定大小

  • padding設定內距

  • background設定背景色

  • alpha設定透明度

  • wrapContentHeight設定居中

https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day3/%E6%88%AA%E5%9C%96%202024-09-18%20%E6%99%9A%E4%B8%8A11.24.42.png

常用設置

size指定元件寬高
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day3/%E6%88%AA%E5%9C%96%202024-09-18%20%E6%99%9A%E4%B8%8A11.30.39.png

padding指定內距
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day3/%E6%88%AA%E5%9C%96%202024-09-18%20%E6%99%9A%E4%B8%8A11.31.05.png

background指定背景顏色
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day3/%E6%88%AA%E5%9C%96%202024-09-18%20%E6%99%9A%E4%B8%8A11.31.32.png

fillMaxHeight / fillMaxWidth指定寬高比照parent
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day3/%E6%88%AA%E5%9C%96%202024-09-18%20%E6%99%9A%E4%B8%8A11.31.52.png

weight指定元件佔比
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day3/%E6%88%AA%E5%9C%96%202024-09-18%20%E6%99%9A%E4%B8%8A11.32.08.png

其他方法

then 適合用於複雜的場景。例如，可以根據條件動態應用不同的 Modifier
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/main/Images/Day3/%E6%88%AA%E5%9C%96%202024-09-18%20%E6%99%9A%E4%B8%8A11.32.26.png


上一篇
從零開始學習 Jetpack Compose Day2 - Compose Hello World
下一篇
從零開始學習 Jetpack Compose Day4 - Text
系列文
從零開始學習 Jetpack Compose 共 30 篇
  1. 26
    從零開始學習 Jetpack Compose Day25 - 專案實作（3）主畫面 ViewModel 建立
  2. 27
    從零開始學習 Jetpack Compose Day26 - 詳細頁ViewModel建立
  3. 28
    從零開始學習 Jetpack Compose Day27 - 專案實作（5）Room建立
  4. 29
    從零開始學習 Jetpack Compose Day28 - Compose UI Test
  5. 30
    從零開始學習 Jetpack Compose Day29 - 參賽感想
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22198 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙