import SwiftUI


struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}


#Preview {
    ContentView()
}

這段 SwiftUI 代碼創建了一個基本的界面，並包含一個系統圖標和文本。以下是它的主要結構和功能：

結構解析

1. VStack: VStack 是一個垂直堆疊視圖容器，將其中的內容按順序垂直排列。
2. Image(systemName: "globe"): 這行代碼使用系統圖標庫中的「地球」圖標。systemName 參數指定了圖標的名稱。
   • imageScale(.large): 設置圖標的大小為大號。
   • foregroundStyle(.tint): 設定圖標的前景色為系統默認的着色樣式。
3. Text("Hello, world!"): 在界面中顯示「Hello, world!」這段文字。
4. .padding(): 給整個 VStack 添加一些內邊距，使內容與邊界保持一定距離。

測試和預覽

• #Preview: 這段代碼在 Xcode 的預覽面板中顯示 ContentView 的效果。這是一種便捷的方式來快速查看代碼渲染結果，無需編譯和運行整個應用程序。

總結

• 使用了 VStack 來垂直排列圖標和文字。
• Image 使用了系統圖標，並應用了着色和大小調整。
• Text 則顯示了一段簡單的文本。
• 加入了 .padding() 來增加視覺上的空間感。
• #Preview 功能方便了在 Xcode 中進行即時預覽。