iT邦幫忙

2023 iThome 鐵人賽

DAY 8
0
Mobile Development

SwiftUI學習之旅系列 第 8

Day 8:協助排版的 View(2)

  • 分享至 

  • xImage
  •  

昨天介紹了幾種可以協助排版的 View,像是三種 Stack、Group 和 Sapcer 今天再來介紹幾種 View。

Divider

首先要介紹的是 Divider,他的用法跟 Spacer 差不多,只是效果不太一樣,Spacer 是一片空白,Divider 則是一條分隔線,他們之間也有一些差異。

來看看實際效果:

可以看到 Image 和 Group 之間多了一條分隔線。

Grid

接下來要介紹的 View 就比較特別,它通常是用在當你的畫面有格狀結構時,就像是 Google 圖片搜尋結果的畫面。

使用起來的效果:

Grid 需要搭配 GridRow 使用,GridRow 裡就是橫排的物件。

.layoutPriority

介紹了幾種可以協助排版的 View,最後來介紹一個對於排版來說很重要的 modifier。

SwiftUI 在排版時會看 View 的優先順序去分配空間,只是每個 View 的預設優先值都是 0,所以會按照在程式裡的順序排下去。

然後在 modifier 之中,.layoutPriority 可以設定 View 在排版時的優先值。

可以看到圖片中,Divider 幾乎吃掉了所有的高度,Spacer 則是一點高度都不剩,這是因為 SwiftUI 在排版的時候,HStack 裡的 Divider 對高的要求是 expanding,所以 HStack 在跟 VStack 要求高的時候也是 expanding 的,這就導致下面的 Spacer 一點高度都拿不到。

那在 Spacer 添加 .layoutPriority 來指定排版的順序。

可以看到,在添加了這個 modifier 之後,Spacer 正常的拿走了剩下的空間,這是因為雖然 Spacer 跟 Divider 都是 expanding,但是 Spacer 的優先值比較高,SwiftUI 會優先將空間分配給 Spacer,而 Divider 自然就拿不到任何空間了。

所以在排版時如果遇到效果跟你想要的不一樣時,可以嘗試調整排版的優先值,以及其他的 View 來協助排版。

那今天就介紹到這裡,明天來介紹一下 View Builder 這個東西。


上一篇
Day 7:協助排版的 View(1)
下一篇
Day 9:關於 ViewBuilder(1)
系列文
SwiftUI學習之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言