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