文章摘要
GPT 4
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结

容器视图的排列方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
struct ContentView: View {
    var body: some View {
        VStack{
            Text("竖直")
            HStack{
                Text("水平")
                ZStack{
                    Text("Z轴")
                    Text("深度")
                }
                Text("水平")
            }
            Text("竖直")
        }
    }
}

排列方式
这部分的内容有点像前端JS中用到的 Flex 布局，最早从相对定位、绝对定位，慢慢过渡到遇事不决就 flex，总之就是很好用。

VStack（垂直栈） 按垂直方向排列其子视图。子视图从上到下依次排列，您可以通过设置间距等属性来控制子视图之间的距离。

HStack（水平栈） 则是在水平方向上排列子视图，从左到右依次排列。

ZStack（深度栈）按照视图的绘制顺序（前后顺序）来堆叠子视图。后添加的视图会覆盖先添加的视图，除非明确设置了 zIndex 来控制视图的显示层次。

就像是已经封装了三种排列方式的视图，然后给div加上对应的 class 一样，大写的首字母分别是Vertical、Horizontal、z-index的缩写。

背景颜色

给视图加背景颜色

1
2
3
4
5
6
7
8
struct ContentView: View {
    var body: some View {
        VStack {
            Text("易困Yikun")
            Text("无限进步")
        }.background(.red)
    }
}

给VStack加背景色

给Text加背景颜色

1
2
3
4
5
6
7
8
struct ContentView: View {
    var body: some View {
        VStack {
            Text("易困Yikun")
            Text("无限进步").background(.red)
        }
    }
}

给Text加背景色

颜色的另一种写法

1
2
3
4
5
6
7
8
9
10
struct ContentView: View {
    var body: some View {
        VStack {
            Color.red
                .frame(width: .infinity,height: 100)
            Text("易困Yikun")
            Text("无限进步")
        }
    }
}

宽高属性

RGB色值 和 忽略安全区域

1
2
3
4
5
6
7
8
struct ContentView: View {
    var body: some View {
        ZStack {
            Color(red:1,green:0.8,blue:0)
            Text("易困Yikun")
        }.ignoresSafeArea()
    }
}

GRB和忽略安全区域**

毛玻璃样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
struct ContentView: View {
    var body: some View {
        ZStack {
            VStack(spacing: 0){
                Color.red
                Color.blue
            }
            Text("易困Yikun")
                .foregroundColor(.secondary)
                .padding(50)
                .background(.ultraThinMaterial)
        }.ignoresSafeArea()
    }
}

毛玻璃样式

渐变

线性渐变

1
2
3
4
5
6
7
struct ContentView: View {
    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [.red,.blue]), startPoint:.leading, endPoint:.trailing)
        }.ignoresSafeArea()
    }
}

线性渐变

径向渐变

1
2
3
4
5
6
7
struct ContentView: View {
    var body: some View {
        ZStack {
            RadialGradient(gradient: Gradient(colors: [.yellow,.green]), center:.center, startRadius: 0, endRadius: 200)
        }.ignoresSafeArea()
    }
}

径向渐变

角度渐变

1
2
3
4
5
6
7
struct ContentView: View {
    var body: some View {
        ZStack {
            AngularGradient(gradient: Gradient(colors: [.purple,.orange,.red,.green,.blue]), center:.center)
        }.ignoresSafeArea()
    }
}

角度渐变

另外一种渐变的写法

1
2
3
4
5
6
7
8
struct ContentView: View {
    var body: some View {
        Text("易困Yikun")
            .frame(maxWidth: .infinity,maxHeight: .infinity)
            .foregroundColor(.white)
            .background(.indigo.gradient)
    }
}

靛蓝色渐变的背景
.gradient 通常表示应用渐变效果

按钮效果

内置样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
struct ContentView: View {
    var body: some View {
        VStack{
            Button("易困Yikun的按钮1"){}
                .buttonStyle(.bordered)
            Button("易困Yikun的按钮2",role: .destructive){}
                .buttonStyle(.bordered)
            Button("易困Yikun的按钮3"){}
                .buttonStyle(.borderedProminent)
            Button("易困Yikun的按钮4",role: .destructive){}
                .buttonStyle(.borderedProminent)
        }
    }
    
    func executeDelete(){
        print("正在删除")
    }
}

按钮内置样式

定制化按钮样式

1
2
3
4
5
6
7
8
9
10
11
12
struct ContentView: View {
    var body: some View {
        Button{
            print("易困Yikun")
        } label: {
            Text("快来按我")
                .padding()
                .foregroundStyle(.white)
                .background(.red)
        }
    }
}

定制化按钮样式

图片

引用图片

需要将图片存入 Assets(.xcassets) 中，这样可以方便地在代码中通过名称引用图片。

1
2
3
4
5
6
7
struct ContentView: View {
    var body: some View {
        Image(decorative: "avatar")
            .resizable()
            .frame(width: 200, height: 200)
    }
}

引用图片

系统图片

xcode内置很多系统图片，可以直接调用

1
2
3
4
5
6
7
struct ContentView: View {
    var body: some View {
        Image(systemName: "pencil.circle")
            .foregroundColor(.red)
            .font(.largeTitle)
    }
}

系统图片

系统图片与按钮联动

1
2
3
4
5
6
7
8
9
10
11
12
struct ContentView: View {
    var body: some View {
        Button {
            print("正在编辑")
        }label: {
            Label("编辑",systemImage: "pencil")
                .padding()
                .foregroundColor(.white)
                .background(.red)
        }
    }
}

系统图片与按钮联动

alert 警告

用于页面中展示重要的提示信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
struct ContentView: View {
    @State private var showingAlert = false
    var body: some View {
        Button("编辑"){
            showingAlert = true
        }
         .alert("提示内容",isPresented: $showingAlert){
            Button("好的",role:.destructive){}
            Button("取消",role:.cancel){}
        } message: {
            Text("请看这个")
        }
    }
}

警告