iOS SwiftUI教程(1)-创建和组合视图_ios开发 swiftui文件可以建多个view吗

1. Create a New Project and Explore the Canvas

• 创建一个新的Xcode 项目 (File > New > Project.)
• Select the Single View App
• select SwiftUI for the user interface

Example Code

import SwiftUI

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

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

默认情况下, SwiftUI视图文件声明了两个结构体 , 第一个结构体, 描述视图的内容和布局。第二个结构声明了该视图的预览。

2. 新版Xcode有了更加便捷了预览

在Xcode的右侧, 新增了视图预览窗口, 点击Resume可以进行静态预览

显示/关闭预览 Editor > Editor and Canvas

3. Customize the Text View

3.1 以下是通过代码对Text进行简单的设置, 更加详细的使用请看Text 相关API

struct ContentView: View {
    var body: some View {
        Text("Hello, summerxx")
            .foregroundColor(.blue)
            .font(Font.system(Font.TextStyle.largeTitle))
    }
}
1
2
3
4
5
6
7

3.2 还可以点击command键 +然后点击要修改的Text/ command+点击文字

3.3 Combine Views Using Stacks

struct ContentView: View {
    var body: some View {
        VStack {
            Text("summerxx0")
                .font(.title)
                .foregroundColor(.blue)
                .font(Font.system(Font.TextStyle.largeTitle))
                .frame(width: 150, height: 150, alignment: Alignment.leading)
                
            HStack {
                Text("summerxx1")
                .font(.title)
                .foregroundColor(.blue)
                    .font(Font.system(Font.TextStyle.largeTitle))
                Text("summerxx2")
                .font(.title)
                .foregroundColor(.blue)
                    .font(Font.system(Font.TextStyle.largeTitle))
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

上面是简单组合的演示, 同时 你可能需要多种不同的控件添加 - 可以通过Xcode右上角的加号进行, 控件的添加 (常用的有 scrollView, button, list, Form 等等)

4. Create a Custom Image View

Image("summerxx").frame(width: 400.0, height: 400.0).clipShape(Circle())
1

5. Use UIKit and SwiftUI Views Together

• 创建XTCustomMapView继承于 UIViewRepresentable 然后重写父类方法makeUIView, updateUIView
• 显示 latitude: 34.011286, longitude: -116.166868 跨度两个经纬度的地理位置

struct XTCustomMapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) {
        // 1. 经纬度
        let coordinate = CLLocationCoordinate2D(
            c)
        // 2. 跨度
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        // 3. 地区
        let region = MKCoordinateRegion(center: coordinate, span: span)
        // 4. 设置
        uiView.setRegion(region, animated: true)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

6. Compose the Detail View

struct ContentView: View {
    var body: some View {
        VStack {
            XTCustomMapView().edgesIgnoringSafeArea(.top)
            .frame(height: 300)
            
            Image("summerxx1").frame(width: 200.0, height: 200.0).clipShape(Circle())
            Text("夏天然后")
                .font(.title)
                .foregroundColor(.blue)
                .font(Font.system(Font.TextStyle.largeTitle))
                .frame(width: 150, height: 50, alignment: Alignment.center)
                
            HStack {
                Text("个人博客")
                .font(.title)
                .foregroundColor(.blue)
                    .font(Font.system(Font.TextStyle.largeTitle))
                Text("summerxx.com")
                .font(.title)
                .foregroundColor(.blue)
                    .font(Font.system(Font.TextStyle.largeTitle))
            }
            Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                Text("编辑资料")
            }.frame(width: 100, height: 40, alignment: Alignment.center)
                .font(Font.system(size: 18))
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

总结: 以上就是包含了SwiftUI的一些简单语法, 以及UI控件的构建, 编译器的一些简单使用

Demo地址 将会持续更新SwiftUI相关代码
https://github.com/summerxx27/SwiftUITutorials