Swiftui 中未填充自定义形状

Question

我有一个要求，我需要覆盖自定义形状，其中一个被填充。这是我的应用程序中重复出现的模式，因此我选择重构代码并传递填充颜色。为了简单起见，我使用了三角形和正方形。我的自定义形状更复杂。这是代码：

struct ContentView: View {
  var body: some View {
    ShapeView(lineWidth: 1, fillColor: .blue)
      .padding()
  }
}

struct ShapeView: View {
  let lineWidth: CGFloat
  let fillColor: Color
  
  var body: some View {
    ZStack {
      Square()
        .stroke(lineWidth:lineWidth)
      Triangle()
        .stroke(lineWidth:lineWidth)
        .fill(fillColor)
    }
    .frame(width: 200, height: 200, alignment: .center)
  }
}

struct Triangle: Shape {
  func path(in rect: CGRect) -> Path {
    var path = Path()
    
    path.move(to: CGPoint(x: rect.midX, y: rect.minY))
    path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
    path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
    path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))
    
    path.closeSubpath()
    
    return path
  }
}

struct Square: 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.minX, y: rect.maxY))
    path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
    path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
    path.addLine(to: CGPoint(x: rect.minX, y: rect.minY))
    
    path.closeSubpath()
    
    return path
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

三角形应该被填充，但实际上没有。为什么没有填满？

Answer 1

您只需填写即可：

struct ShapeView: View {
  let lineWidth: CGFloat
  let fillColor: Color
  
  var body: some View {
    ZStack {
      Square()
        .stroke(lineWidth:lineWidth)
      Triangle()
        .fill(fillColor) // <<: Here!
    }
    .frame(width: 200, height: 200, alignment: .center)
  }
}

Swiftui 中未填充自定义形状

Custom shape not being filled in Swifftui

swiftui

shapes