• 筆記
  • 用stacks排列視圖
  • 顏色和布局
  • 漸變
  • 按鈕和圖像
  • 顯示彈框消息

筆記

本篇文章記錄一下100 Days of SwiftUI第20天的筆記內(nèi)容

用stacks排列視圖

如果想返回多個東西可以用：
HStack/VStack/ZStack處理水平/垂直/深度

// VStack：一個放置在另一個之上
var body: some View {
    VStack {
    // VStack(spacing: 20) { // 設(shè)置間距
    // VStack(alignment: .leading) { // 設(shè)置對齊方式，默認居中
        Text("Hello, world!")
        Text("This is inside a stack")
        Spacer() // 可以使用一個或多個Spacer視圖將stack的內(nèi)容推到一側(cè)
    }
}

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

// ZStack：按深度排列事物，使視圖重疊
// ZStack從上到下、從后到前繪制其內(nèi)容
ZStack {
    Text("Hello, world!")
    Text("This is inside a stack")
}

顏色和布局

// 整個視圖設(shè)置顏色
ZStack {
    Color.red // 本身就是一個視圖
        .frame(width: 200, height: 200) // 可以用frame設(shè)置特定尺寸
        // .frame(minWidth: 200, maxWidth: .infinity, maxHeight: 200) // 設(shè)置高度不超過200，但寬度至少為200
    Text("Your content")
}
.ignoresSafeArea()  // 整個屏幕填充顏色（忽略安全區(qū)）

漸變

// 漸變組成：顯示一系列顏色、尺寸和方向信息、要使用的漸變類型

// 1.線性漸變
LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom)

// Gradient.Stop可以設(shè)置漸變停止點
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可以調(diào)整按鈕外觀，例如.destructive表示刪除按鈕具有破壞性
Button("Delete selection", role: .destructive, action: executeDelete)

// .bordered和.borderedProminent（邊框突出樣式）使用按鈕的內(nèi)置樣式
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)
}

// 按鈕設(shè)置圖片
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.")
       }
   }
}