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 支持的内置形状：