SwiftUI学习-(第1节)

使用支持SwiftUI的Xcode创建一个SwiftUI项目，如下图，语言使用Swift，Interface选择SwiftUI，创建一个崭新的项目。

创建SwiftUI项目
在左侧可以选择一个以App.swift结尾的文件，可以看到项目的入口代码：

//
//  BoxSwiftUIApp.swift
//  BoxSwiftUI
//
//  Created by BoxJing on 2023/6/8.
//

import SwiftUI

@main
struct BoxSwiftUIApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

@main就是整个App的入口，可以看到基本结构为App->Scene->View，这个架构是满足所有SwiftApp的需求而生，WindowGroup帮助我们管理视窗。ContentView是展现给用户看到的内容。

SwiftUIApp架构
选择ContentView后，可以看到右侧是有2块东西，一块是代码，另一块是一个类似模拟器的东西（预览窗），这个预览窗其实是由代码中的PreviewProvider支持的。
预览窗
当我们把上图中选中的代码注释掉后，右侧的预览窗就直接没有了，有时候可能会发现PreviewProvider代码并没有删除，然而看不到预览窗，这时候可能就是下图中的Canvas被不小心取消掉了，可以找下图箭头所示的地方将Canvas勾选起来即可。
Canvas
预览窗的左下角中间小按钮是一个选择模式，当我们选择某些代码后，预览窗中对应的控件会被选中，如下图所示，当然在预览窗中选择某个控件后，代码也会自动被选中。其他小菜单可是自己摸索一下，有直接看深色模式的样子、各种尺寸手机下的样子等等。
选择模式
我们来分析一下默认的代码块：

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

看到这样的代码，如果会一点Flutter应该会有一种非常熟悉的味道，太像了Dart的语法，所有的东西可以直接链式语法实现，在这里其实是属于Modifier(调整器)，比如代码中的imageScale和foregroundColor都是对Image控件的一种调整来更符合我们要的效果。VStack是一种View，同时也是一种Layout， 就是Vertical Stack的简写，垂直方向的布局，所以图片和文字是垂直方向的排列，那我们就可以直接联想到HStack是水平方向的布局方式了。

下一篇文章，我们开始写一个完整的简单功能页面。