【Tips】常用代码片段

[boycgit]

布局

使用 ZStack 设置全局背景颜色

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.gray
               .edgesIgnoringSafeArea(.all) //只让背景忽略安全区，内容部分还是不忽略
            VStack(spacing: 20) {
                Text("ZStack")
                .font(.largeTitle)

                Text("Ignoring the Safe Areas will extend a view to fill the whole scene.")

                    .frame(maxWidth: .infinity)
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.green)
                Spacer()
            }
            .font(.title)
        }
    }
}

摘录来自: Mark Moeykens. “SwiftUI Views Quick Start”

ZStack 非常适合进行图文混排

这有点儿类似于 CSS 中的 absolute 绝对定位布局

[boycgit]

GeometryReader

该组件应该属于 Push Out 容器类型，它可以让你读取容器宽高，进行计算式布局

布局

计算

坐标

特征坐标

安全区尺寸

[boycgit]

按钮圆角

直接使用 cornerRadius 设置将出现圆角被裁剪的问题，应当使用 background + RoundedRectangle 实现：

Button(action: {}) {
               Text("Rounded Border Button")
                .padding()
                .background(
                    RoundedRectangle(
                    cornerRadius: 10
                ).stroke(Color.purple, lineWidth: 2)
                )
            }