一个简洁的SwiftUI主页设计。

提示
参阅 Apple Developer官方网站来了解各种视图。
Building layouts with stack views

引入SwiftUI和嵌套视图ZStack。

1
2
3
4
5
6
7
8
import SwiftUI

struct LocationView: View {
    var body: some View {
        ZStack {
        }
    }
}

引入垂直视图VStack，创建logo与标题。

1
2
3
4
5
6
7
VStack{
   Text("I")
       .font(.system(size: 80))
   Text("Your text here")
       .foregroundColor(.primary)
       .font(.largeTitle)
}

引入水平视图HStack,创建第一块圆角矩形并引入数据。

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
31
HStack{
    VStack(alignment: .center) {
        Text("Text")
            .foregroundColor(.primary)
            .font(.system(size: 18, weight: .bold, design: .rounded))
        Text("Text".uppercased())
            .foregroundColor(.primary)
            .font(.system(size: 12, weight: .regular, design: .rounded))
    }
    Spacer()
    VStack(alignment: .center) {
        Text("Text")
            .foregroundColor(.primary)
            .font(.system(size: 18, weight: .bold, design: .rounded))
        Text("Text".uppercased())
            .foregroundColor(.primary)
            .font(.system(size: 12, weight: .regular, design: .rounded))
    }
    Spacer()
    VStack(alignment: .center) {
        Text("24岁")
            .foregroundColor(.primary)
            .font(.system(size: 18, weight: .bold, design: .rounded))
        Text("年龄".uppercased())
            .foregroundColor(.primary)
            .font(.system(size: 12, weight: .regular, design: .rounded))
    }
}
.padding()
.foregroundStyle(LinearGradient(colors: [.blue, .indigo], startPoint: .top, endPoint: .bottom))
.background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 12, style: .continuous))

创建第二块圆角矩形并引入数据

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
VStack(alignment: .leading, spacing: 2) {
    Text("Your text here.".uppercased())
        .font(.headline)
        .foregroundColor(.primary)
    HStack(alignment: .top, content: {
        Text("Your text here.")
            .foregroundColor(.primary)
            .font(.caption)
            .multilineTextAlignment(.leading)
            .frame(width: 300, height: 32)
        Spacer()
        Text("Text")
            .foregroundColor(.primary)
            .font(.system(size: 12, weight: .bold))
    })
    .padding(.vertical)
    HStack {
        VStack(alignment: .center, content: {
            Text("Text")
                .foregroundColor(.primary)
                .font(.system(size: 24, weight: .bold, design: .rounded))
            Text("Text".uppercased())
                .foregroundColor(.primary)
                .font(.system(size: 12, weight: .regular, design: .rounded))
        })
        Spacer()
        VStack(alignment: .center, content: {
            Text("Text")
                .font(.system(size: 24, weight: .bold, design: .rounded))
                .foregroundColor(.green)
            Text("Text".uppercased())
                .foregroundColor(.primary)
                .font(.system(size: 12, weight: .regular, design: .rounded))
        })
        Spacer()
        VStack(alignment: .center, content: {
            Text("Text")
                .foregroundColor(.primary)
                .font(.system(size: 24, weight: .bold, design: .rounded))
            Text("Text".uppercased())
                .foregroundColor(.primary)
                .font(.system(size: 12, weight: .regular, design: .rounded))
        })
    }
}
.padding()
.foregroundColor(Color.black.opacity(0.8))
.background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 20, style: .continuous))

底部小字

1
2
3
4
5
Text("Your text here")
    .foregroundColor(.primary)
    .padding()
    .foregroundStyle(.black)
    .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 12, style: .continuous))

底部按钮

1
2
3
4
5
6
7
Button("Button"){
}
.frame(width:100.0,height:50.0)
.background(.tint)
.foregroundColor(.white)
.cornerRadius(30.0)
.padding()

完成后再添加Preview，运行后即可看到效果。

运行情况

完整代码

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import SwiftUI

struct LocationView: View {
    var body: some View {
        ZStack {
            VStack {
                Text("I")
                    .font(.system(size: 80))
                Text("Text")
                    .foregroundColor(.primary)
                    .font(.largeTitle)
                HStack{
                    VStack(alignment: .center) {
                        Text("Text")
                            .foregroundColor(.primary)
                            .font(.system(size: 18, weight: .bold, design: .rounded))
                        Text("Text".uppercased())
                            .foregroundColor(.primary)
                            .font(.system(size: 12, weight: .regular, design: .rounded))
                    }
                    Spacer()
                    VStack(alignment: .center) {
                        Text("Text")
                            .foregroundColor(.primary)
                            .font(.system(size: 18, weight: .bold, design: .rounded))
                        Text("Text".uppercased())
                            .foregroundColor(.primary)
                            .font(.system(size: 12, weight: .regular, design: .rounded))
                    }
                    Spacer()
                    VStack(alignment: .center) {
                        Text("Text")
                            .foregroundColor(.primary)
                            .font(.system(size: 18, weight: .bold, design: .rounded))
                        Text("Text".uppercased())
                            .foregroundColor(.primary)
                            .font(.system(size: 12, weight: .regular, design: .rounded))
                    }
                }
                .padding()
                .foregroundStyle(LinearGradient(colors: [.blue, .indigo], startPoint: .top, endPoint: .bottom))
                .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 12, style: .continuous))
                VStack(alignment: .leading, spacing: 2) {
                    Text("Text".uppercased())
                        .font(.headline)
                        .foregroundColor(.primary)
                    HStack(alignment: .top, content: {
                        Text("Your text here.")
                            .foregroundColor(.primary)
                            .font(.caption)
                            .multilineTextAlignment(.leading)
                            .frame(width: 300, height: 32)
                        Spacer()
                        Text("Text")
                            .foregroundColor(.primary)
                            .font(.system(size: 12, weight: .bold))
                    })
                    .padding(.vertical)
                    HStack {
                        VStack(alignment: .center, content: {
                            Text("Text")
                                .foregroundColor(.primary)
                                .font(.system(size: 24, weight: .bold, design: .rounded))
                            Text("Text".uppercased())
                                .foregroundColor(.primary)
                                .font(.system(size: 12, weight: .regular, design: .rounded))
                        })
                        Spacer()
                        VStack(alignment: .center, content: {
                            Text("Text")
                                .font(.system(size: 24, weight: .bold, design: .rounded))
                                .foregroundColor(.green)
                            Text("Text".uppercased())
                                .foregroundColor(.primary)
                                .font(.system(size: 12, weight: .regular, design: .rounded))
                        })
                        Spacer()
                        VStack(alignment: .center, content: {
                            Text("Text")
                                .foregroundColor(.primary)
                                .font(.system(size: 24, weight: .bold, design: .rounded))
                            Text("Text".uppercased())
                                .foregroundColor(.primary)
                                .font(.system(size: 12, weight: .regular, design: .rounded))
                        })
                    }
                }
                .padding()
                .foregroundColor(Color.black.opacity(0.8))
                .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 20, style: .continuous))
                Text("Your text here.")
                    .foregroundColor(.primary)
                    .padding()
                    .foregroundStyle(.black)
                    .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 12, style: .continuous))
                Button("Button"){
                }
                .frame(width:100.0,height:50.0)
                .background(.tint)
                .foregroundColor(.white)
                .cornerRadius(30.0)
                .padding()
            }
        }
    }
    
    struct LocationView_Previews: PreviewProvider {
        static var previews: some View {
            LocationView()
        }
    }
}