Skip to main content

layout

我來為您解釋 SwiftUI 中的 VStack 和 ProgressView：

Read file: Example/Example/Views/ContentView.swift 根據您的程式碼，我來解釋 VStack 和 ProgressView 這兩個 SwiftUI 元件：

VStack​

VStack 是 SwiftUI 中的一個垂直堆疊容器，用來將多個 UI 元件垂直排列：

VStack {
    ProgressView("Loading Panels...")
        .progressViewStyle(CircularProgressViewStyle())
}

特點：

  • 將子元件從上到下垂直排列
  • 預設會置中對齊
  • 可以設定間距（spacing）
  • 可以設定對齊方式（alignment）

其他類似的容器：

  • HStack：水平排列
  • ZStack：重疊排列（類似 CSS 的 absolute positioning）

ProgressView​

ProgressView 是 SwiftUI 中的進度指示器，用來顯示載入或處理中的狀態：

ProgressView("Loading Panels...")
    .progressViewStyle(CircularProgressViewStyle())

特點：

  • 顯示載入動畫（通常是旋轉的圓圈）
  • 可以加上文字說明（如 "Loading Panels..."）
  • 有多種樣式可選擇：
    • CircularProgressViewStyle()：圓形進度條
    • LinearProgressViewStyle()：線性進度條

在您的程式碼中的用途​

在您的 ContentView.swift 中，這個組合被用在 .loadingRemotePanels 狀態：

case .loadingRemotePanels:
    VStack {
        ProgressView("Loading Panels...")
            .progressViewStyle(CircularProgressViewStyle())
    }

作用：

  1. 當應用程式正在載入遠端面板時
  2. 顯示一個圓形的載入動畫
  3. 配上 "Loading Panels..." 的文字提示
  4. 讓使用者知道系統正在處理中

這是一個很常見的 UI 模式，用來提供使用者回饋，避免使用者以為應用程式當機了。

scroll 的 作法​

我來為您解釋 SwiftUI 中的 GeometryReader 和 ScrollView：

Read file: Example/Example/Views/ContentView.swift 根據您的程式碼，我來解釋 GeometryReader 和 ScrollView 這兩個 SwiftUI 元件：

GeometryReader​

GeometryReader 是一個尺寸讀取器，用來獲取父容器的尺寸資訊：

GeometryReader { geo in
    // 使用 geo.size.width 和 geo.size.height
}

特點：

  • geo.size.width：獲取可用寬度
  • geo.size.height：獲取可用高度
  • geo.safeAreaInsets：獲取安全區域邊距
  • 會佔據所有可用的空間
  • 常用於響應式佈局

在您的程式碼中的用途：

.frame(
    maxWidth: .infinity,
    minHeight: geo.size.height
)

這裡使用 geo.size.height 來確保內容至少填滿整個螢幕高度。

ScrollView​

ScrollView 是可滾動容器，當內容超出螢幕範圍時可以滾動：

ScrollView(.vertical, showsIndicators: true) {
    // 內容
}

參數說明：

  • .vertical：垂直滾動（還有 .horizontal 水平滾動）
  • showsIndicators: true：顯示滾動條指示器

特點：

  • 當內容超出容器大小時自動啟用滾動
  • 支援垂直和水平滾動
  • 可以控制是否顯示滾動條
  • 內容會自動調整大小

組合使用的目的​

在您的程式碼中，這個組合被用在 .welcome 狀態：

case .welcome:
    GeometryReader { geo in
        ScrollView(.vertical, showsIndicators: true) {
            VStack {
                Text("WFCO Power Pro")
                Button("Start with Nearby Panels") { ... }
                if state.accessToken != nil {
                    Button("Start with Remote Panels") { ... }
                }
            }
            .frame(
                maxWidth: .infinity,
                minHeight: geo.size.height
            )
        }
    }

設計目的：

  1. GeometryReader：獲取螢幕尺寸，確保佈局響應式
  2. ScrollView：當內容過多時（例如在不同螢幕尺寸上）可以滾動
  3. VStack：垂直排列按鈕和文字
  4. frame：確保內容至少填滿整個螢幕高度，提供更好的視覺效果

這種組合在 iOS 應用程式中很常見，特別是在需要適應不同螢幕尺寸和方向的歡迎頁面或設定頁面。