在SwiftUI中设计自己的按钮

Question

我正在尝试绘制每个圆段包含3个可以单击的按钮的以下图片。

我已经从该论坛复制了代码，但是当我尝试使用它时，出现错误消息，并且代码无法编译。尝试了各种版本（已打印最新版本），但没有任何效果。我究竟做错了什么？另外，整数i和j是否会传递给CustomShapeButton类的调用？

import SwiftUI
import UIKit

struct ContentView: View {

    static let segmentCount = 4
    static let circleCount = 4

    var i: Int = 0
    var j: Int = 0
    var NewButtons: CustomShapeButton

    var body: some View {
        ZStack {
            ForEach(1..<ContentView.circleCount){ j in
                ForEach(1..<ContentView.segmentCount){ i in
                    NewButtons = CustomShapeButton()
                }
            }
        }
    }
}


class CustomShapeButton: UIButton {

    lazy var pantsShapeBezierPath: UIBezierPath = {
        // Crate new path
        let path = UIBezierPath()

        var r = CGFloat(75.0)
        r = CGFloat(50.0 + (CGFloat(j) - 1.0) * 50.0)
        let center_x = CGFloat(200.0)
        let center_y = CGFloat(200.0)
        var arc_start = CGFloat(45.0 * CGFloat(Double.pi) / 180.0)
        arc_start = CGFloat((45.0 + (CGFloat(i) - 1.0) * 90.0)) * CGFloat(Double.pi) / 180.0

        let arc_length = CGFloat(90.0 * CGFloat(Double.pi) / 180.0)
        let arc_width = CGFloat(45.0)
        let line0Target_x = center_x + r * CGFloat(cos(Double(arc_start)))
        let line0Target_y = center_y + r * CGFloat(sin(Double(arc_start)))
        let line1Target_x = center_x + (r + arc_width) * CGFloat(cos(Double(arc_start + arc_length)))
        let line1Target_y = center_x + (r + arc_width) * CGFloat(sin(Double(arc_start + arc_length)))

        path.move(to: CGPoint(x: line0Target_x, y: line0Target_y))
        path.addArc(center: CGPoint(x: center_x, y: center_y), radius: r, startAngle: Angle(radians: Double(arc_start)), endAngle: Angle(radians: Double(arc_start + arc_length)), clockwise: false)
        path.addLine(to: CGPoint(x: line1Target_x, y: line1Target_y))
        path.addArc(center: CGPoint(x: center_x, y: center_y), radius: (r + arc_width), startAngle: Angle(radians: Double(arc_start + arc_length)), endAngle: Angle(radians: Double(arc_start)), clockwise: true)
        path.addLine(to: CGPoint(x: line0Target_x, y: line0Target_y))
        path.close()

        return path
    }()

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        // Set shape filling color
        UIColor.red.setFill()

        // Fill the shape
        pantsShapeBezierPath.fill()
    }

    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {

        // Handling touch events

        if (pantsShapeBezierPath.contains(point)) {
            return self

        } else {
            return nil
        }
    }

Answer 1

您的代码以不正确的方式混合了UIKit和SwiftUI。您无法在body语句中执行此操作：

NewButtons = CustomShapeButton()

body函数中的所有内容都必须为View。这是一个赋值语句。

接下来，CustomShapeButton是UIButton子类。您也不能在这里使用它。如果要使用此随机Internet代码（我不建议这样做），则必须将其包装在UIViewRepresentable中。相反，请考虑遵循Apple关于如何创建基于路径的自定义View的指南。

https://developer.apple.com/tutorials/swiftui/drawing-paths-and-shapes

一旦您可以绘制所需的形状，将其包裹在Button中：

Button(action: { /* do your action */ }) {
    CircularCutoutShape()
}