SwiftUI - 形狀

形狀用於在 SwiftUI 中為使用者介面建立圖形元素。它們可以調整大小、自定義和重複使用。它們可以非常高效地建立複雜且使用者友好的設計。SwiftUI 提供各種預定義形狀，例如矩形、圓形等，並允許我們輕鬆地使用 Shape 協議建立任何自定義形狀。

我們可以藉助預定義的修飾符（例如 fill()、background() 等）來自定義任何形狀。在本章中，我們將學習如何建立形狀，並瞭解 SwiftUI 提供的預定義方法和修飾符。

在 SwiftUI 中建立自定義形狀

在 SwiftUI 中，我們可以使用預定義的方法或使用 Shape 協議來建立形狀。此處使用 Shape 協議來建立自定義形狀。因此，要建立自定義形狀，我們需要建立一個符合 Shape 協議的結構體。

在此結構體中，我們呼叫 path(in:) 方法來使用 Path 結構體定義形狀的路徑。之後，我們在 ContentView 中使用此結構體來自定義形狀並獲取形狀的即時預覽。我們也可以簡單地使用 Path() 結構體來建立形狀。

示例 1

以下 SwiftUI 程式用於使用 Shape 協議建立自定義正方形形狀。

import SwiftUI

struct mySquare: Shape {
   func path(in rect: CGRect) -> Path {
      var path = Path()

      path.move(to: CGPoint(x: rect.minX, y: rect.minY))
      path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
      path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
      path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
      path.closeSubpath()
      return path
   }
}

struct ContentView: View {
   var body: some View {
      mySquare()
         .fill(Color.green)
         .frame(width: 100, height: 100)
   }
}

#Preview {
   ContentView()
}

輸出

示例 2

以下 SwiftUI 程式用於使用 Path() 結構體建立自定義正方形形狀。

import SwiftUI

struct ContentView: View {
  var body: some View {
    Path { xPath in
      xPath.move(to: CGPoint(x: 50, y: 50))
      xPath.addLine(to: CGPoint(x: 110, y: 50))
      xPath.addLine(to: CGPoint(x: 110, y: 100))
      xPath.addLine(to: CGPoint(x: 50, y: 100))
      xPath.closeSubpath()
    }
    .stroke(Color.red, lineWidth: 5)
  }
}

#Preview {
  ContentView()
}

輸出

在 SwiftUI 中建立形狀的方法

SwiftUI 支援各種內建方法，這些方法用於開發各種型別的形狀，使 UI 更具吸引力。一些常用的方法如下：

在 SwiftUI 中自定義形狀的修飾符

SwiftUI 支援各種內建修飾符，用於根據使用者介面設計的需求修改形狀。我們可以在形狀上使用單個或多個修飾符。SwiftUI 按順序執行修飾符，因此請相應地應用它們。一些常用的修飾符如下：

SwiftUI 中的內建形狀

SwiftUI 提供了一些內建形狀，用於設計各種元件。這些形狀易於使用且易於自定義，例如使用 SwiftUI 提供的修飾符進行樣式設定、著色、填充等。以下是 SwiftUI 支援的內建形狀：