• 笔记
  • 用stacks排列视图
  • 颜色和布局
  • 渐变
  • 按钮和图像
  • 显示弹框消息

笔记

本篇文章记录一下100 Days of SwiftUI第20天的笔记内容

用stacks排列视图

如果想返回多个东西可以用：
HStack/VStack/ZStack处理水平/垂直/深度

// VStack：一个放置在另一个之上
var body: some View {
    VStack {
    // VStack(spacing: 20) { // 设置间距
    // VStack(alignment: .leading) { // 设置对齐方式，默认居中
        Text("Hello, world!")
        Text("This is inside a stack")
        Spacer() // 可以使用一个或多个Spacer视图将stack的内容推到一侧
    }
}

// HStack：一个放置在另一个旁边
HStack(spacing: 20) {
    Text("Hello, world!")
    Text("This is inside a stack")
}

// ZStack：按深度排列事物，使视图重叠
// ZStack从上到下、从后到前绘制其内容
ZStack {
    Text("Hello, world!")
    Text("This is inside a stack")
}

颜色和布局

// 整个视图设置颜色
ZStack {
    Color.red // 本身就是一个视图
        .frame(width: 200, height: 200) // 可以用frame设置特定尺寸
        // .frame(minWidth: 200, maxWidth: .infinity, maxHeight: 200) // 设置高度不超过200，但宽度至少为200
    Text("Your content")
}
.ignoresSafeArea()  // 整个屏幕填充颜色（忽略安全区）

渐变

// 渐变组成：显示一系列颜色、尺寸和方向信息、要使用的渐变类型

// 1.线性渐变
LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom)

// Gradient.Stop可以设置渐变停止点
LinearGradient(gradient: Gradient(stops: [
    Gradient.Stop(color: .white, location: 0.45), // 可以直接编写.init而不是Gradient.Stop
    Gradient.Stop(color: .black, location: 0.55),
]), startPoint: .top, endPoint: .bottom)

// 2.径向渐变
RadialGradient(gradient: Gradient(colors: [.blue, .black]), center: .center, startRadius: 20, endRadius: 200)

// 3.角度渐变
AngularGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red]), center: .center)

按钮和图像

struct ContentView: View {
    var body: some View {
        // Button("Delete selection") {
        //   print("Now deleting…")
        // }
        Button("Delete selection", action: executeDelete)
    }

    func executeDelete() {
        print("Now deleting…")
    }
}

// role可以调整按钮外观，例如.destructive表示删除按钮具有破坏性
Button("Delete selection", role: .destructive, action: executeDelete)

// .bordered和.borderedProminent（边框突出样式）使用按钮的内置样式
VStack {
    Button("Button 1") { }
        .buttonStyle(.bordered)
    Button("Button 2", role: .destructive) { }
        .buttonStyle(.bordered)
    Button("Button 3") { }
        .buttonStyle(.borderedProminent)
    Button("Button 4", role: .destructive) { }
        .buttonStyle(.borderedProminent)
}

// tint自定义按钮颜色
Button("Button 3") { }
    .buttonStyle(.borderedProminent)
    .tint(.mint)

// 自定义按钮
Button {
    print("Button was tapped")
} label: {
    Text("Tap me!")
        .padding()
        .foregroundColor(.white)
        .background(.red)
}

// 按钮设置图片
Button {
    print("Edit button was tapped")
} label: {
    Label("Edit", systemImage: "pencil")
}

显示弹框消息

struct ContentView: View {
   @State private var showingAlert = false

   var body: some View {
       Button("Show Alert") {
           showingAlert = true
       }
       .alert("Important message", isPresented: $showingAlert) {
           Button("Delete", role: .destructive) { }
           Button("Cancel", role: .cancel) { }
       } message: {
           Text("Please read this.")
       }
   }
}