如何在按鈕背景的快速 UI 中繪制中間帶有半線的圓圈？

Question

我想繪制一個已經在 Android 端繪制的形狀：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:innerRadius="0dp"
        android:shape="ring"
        android:thicknessRatio="2"
        android:useLevel="false">


    <stroke
            android:width="2dp"
            android:color="@color/color_boader" />
</shape>

我已將其設置為按鈕背景，上面寫有“注冊”，如下圖所示：

我想用 SwiftUI 在 iOS 中做同樣的事情。 我嘗試使用 ZStack 進行以下操作：

ZStack(alignment: .trailing) {
                        Spacer()
                            .frame(width: 40, height: 2)
                            .background(Color.boader)
                        Text("Sign up")
                            .foregroundColor(.white)
                            .padding()
                            .padding()
                            .overlay(
                                Circle()
                                    .stroke(Color.boader, lineWidth: 2))
                            .offset(x: 20)
                    }

有沒有更好的方法來實現這一目標？

Answer 1

您可以使用Path制作自己的Shape ，然后將此形狀用作其他視圖的背景：

struct ButtonWithSpecialRing: View {

    var body: some View {

        Button(action: {
            print("signed in")
        }) {

            Text("Sign up!")
                .background(CircleWithSemiLine()
                    .stroke()
                    .foregroundColor(.gray))
        }

    }

}

struct CircleWithSemiLine: Shape {

    func path(in rect: CGRect) -> Path {

        var path = Path()
        let radius = rect.size.width / 2

        path.addArc(center: CGPoint(x: radius, y: radius / 2), radius: radius, startAngle: .degrees(0), endAngle: .degrees(360), clockwise: false)

        path.addLine(to: CGPoint(x: radius , y: radius / 2)) // you may play with radius to fit text

        return path

    }

}

您可以稍微偏移或使用radius來更好地居中。 我在短時間內只取得了這個結果，但你可以更進一步：