SwiftUI基础-创建和组合视图

发表于 更新于 阅读次数： Disqus：

img

面向MacOS开发的第一课

0x00 开发环境

  • MacOS BigSur 11.5.2
  • Xcode 12

0x01 创建一个新项目并探索画布

1. 第一步

打开Xcode并在Xcode的启动窗口中单击Create a new Xcode project，或在顶部菜单栏选择File>New>Project。

img

2. 第二步

在模版选择器中，选择iOS作为平台，选择App模版，然后点击下一步

img

3. 第三步

产品名称输入Landmarks，界面选择SwiftUI，生命周期选择SwiftUI App，然后点击下一步，在你的Mac上选择一个位置存放Landmarks工程。

img

4. 第四步

在项目导航区中选择LandmarksApp.swift

1
2
3
4
5
6
7
8
9
10
import SwiftUI

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

使用SwiftUI应用生命周期的应用程序具有符合应用程序协议的结构。该结构的body属性返回一个或多个场景，这些场景反过来提供要显示的内容。@main属性标识应用程序的入口点。

5. 第五步

在项目导航区选择ContentView.swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在默认情况下，SwiftUI视图文件声明两个结构。第一个结构符合View协议并描述视图的内容和布局。第二个结构声明该视图的预览。

6. 第六步

在画布中，单击Resume显示预览。

img

如果画布不可见，请选择Editor>Canvas来显示它。

7. 第七步

在body属性中，修改“Hello World”和自己打个招呼。
当你更改视图body属性中代码时，预览会更新反映您的更改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello SwiftUI!")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}