iT邦幫忙

2024 iThome 鐵人賽

DAY 9
0
Mobile Development

從零開始學習 Jetpack Compose系列 第 9

從零開始學習 Jetpack Compose Day8 - Column、Row與Box

  • 分享至 

  • xImage
  •  

在 Jetpack Compose 中,Column、Row 和 Box 是三個常用的排版元件。用來設定子元件的排列方式。

Column

Column 會將子元件垂直排列,每個子元件從上到下依序顯示,適合用於縱向排版。
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/refs/heads/main/Images/Day8/%E6%88%AA%E5%9C%96%202024-09-23%20%E6%99%9A%E4%B8%8A10.48.01.png

調整排列方式:預設為向左上排列,如果要調整可以透過verticalArrangementhorizontalAlignment
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/refs/heads/main/Images/Day8/%E6%88%AA%E5%9C%96%202024-09-23%20%E6%99%9A%E4%B8%8A10.53.52.png

Row

Row 會將子元件水平排列,每個子元件從左到右依序顯示,適合用於橫向排版。
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/refs/heads/main/Images/Day8/%E6%88%AA%E5%9C%96%202024-09-23%20%E6%99%9A%E4%B8%8A10.54.57.png

調整排列方式:與Column一樣預設為向左上排列,如果要調整可以透過verticalAlignmenthorizontalArrangement
https://raw.githubusercontent.com/jian-fu-hung/ithelp-2024/refs/heads/main/Images/Day8/%E6%88%AA%E5%9C%96%202024-09-23%20%E6%99%9A%E4%B8%8A10.58.30.png

Box

Box 是一個相對自由的排版元件,允許子元件彼此重疊。可以用來疊放多個元件,並控制它們的相對位置。

子元件可以透過modifier.align來指定放在Box的任何一個角落

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


上一篇
從零開始學習 Jetpack Compose Day7 - Image
下一篇
從零開始學習 Jetpack Compose Day9 - ConstrainLayout
系列文
從零開始學習 Jetpack Compose12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言