SwiftUI - 檢視大小

檢視大小表示檢視的高度和寬度。使用檢視大小，我們可以確定一個檢視在其父檢視中佔用了多少空間，它可以幫助開發人員瞭解如何在父檢視中調整多個檢視。我們可以分別控制檢視的寬度和高度。在 SwiftUI 中，我們可以使用固定大小或動態大小，這完全取決於開發人員的選擇。

SwiftUI 中的固定大小

固定大小是指不會改變的大小。在 SwiftUI 中，我們可以使用 frame() 修飾符來實現。此修飾符控制子檢視或父檢視的大小和寬度。它是調整檢視大小最常用和最直接的修飾符。使用此修飾符，我們可以調整寬度或高度，或者同時調整寬度和高度。我們還可以藉助 frame() 修飾符設定檢視的對齊方式。

語法

以下是語法：

func frame(
   width: CGFloat? = nil,
   height: CGFloat? = nil,
   alignment: Alignment = .center
) -> some View

引數

以下是 frame() 修飾符支援的引數：

• width：用於設定固定寬度。

• height：用於設定固定高度。

• alignment：用於設定檢視的對齊方式。

示例

以下 SwiftUI 程式設定矩形檢視的寬度和高度。

import SwiftUI
struct ContentView: View {   
   var body: some View {
      ZStack{
         Rectangle()
            .fill(.orange)
         
         // Setting the width and height
            .frame(width: 250, height: 90)
         Text("TutorialsPoint")
            .font(.title2)
            .foregroundStyle(.white)
            .bold()
      }
   }
}
#Preview {
   ContentView()
}

輸出

SwiftUI 中的動態大小

在 SwiftUI 中，我們可以指定檢視的動態大小。這可以透過使用 GeometryReader 來實現。GeometryReader 用於建立佈局，其中子檢視的大小根據父檢視中可用的空間進行調整。它提供一個 geometry 物件，其中包含父檢視的大小和位置，因此我們可以透過操作 geometry 物件來獲取子檢視的大小。

語法

以下是語法：

geometryReaderObject.size.width
geometryReaderObject.size.height

示例

以下 SwiftUI 程式設定矩形檢視的寬度和高度。

import SwiftUI
struct ContentView: View {   
   var body: some View {
      GeometryReader{myGeometry in
         VStack{
            Text("Width pf parent view: \(myGeometry.size.width)")
            Text("Height pf parent view: \(myGeometry.size.height)")
            
            Rectangle().fill(.mint)            
               // Dynamic sizes
               .frame(width: myGeometry.size.width/2, height: myGeometry.size.height/2)
         }
      }
   }
}
#Preview {
   ContentView()
}

輸出