自定义控件中图层的 SwiftUI 背景颜色

Question

我正在尝试在 SwiftUI 中创建一个自定义切换按钮控件，用户可以在圆形胶囊中看到两个文本值，其中选定的值以一种颜色显示，未选定的值以不同的颜色显示。我正在执行此操作的示例代码将在登录/加入屏幕上，用户可以在其中切换查看登录屏幕或加入屏幕。我的问题是我无法弄清楚让我的背景颜色如下所示工作。在我下面的示例中，登录周围的绿色显示选定的值，连接的灰色值显示未选定的选项。我的问题是我希望用相同的未选择颜色(灰色)填充看起来像白色沙漏的两个值之间的空间。



我的代码如下:

struct LoginJoinToggle : View {
@State var showLogin: Bool = true

var body: some View {
    var leftColor: Color = Color.green
    var rightColor: Color = Color.gray
    var leftForegroundColor: Color = Color.white
    var rightForegroundColor: Color = Color.black

    if (showLogin == false){
        leftColor = Color.gray
        rightColor = Color.green
        leftForegroundColor = Color.black
        rightForegroundColor = Color.white
    }
    return HStack{
        Text("Login")
            .font(.headline)
            .foregroundColor(leftForegroundColor)
            .padding()
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(leftColor)
            .cornerRadius(40.0)
            .onTapGesture {self.showLogin = true}
        Text("Join")
            .font(.headline)
            .foregroundColor(rightForegroundColor)
            .padding()
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(rightColor)
            .cornerRadius(40.0)
            .onTapGesture {self.showLogin = false}
    }.overlay(
        RoundedRectangle(cornerRadius: 40)
            .stroke(Color.green, lineWidth: 1)
    )
}

我可以通过向 HStack 添加灰色背景颜色来正确填充沙漏区域，如下所示，但它也显示整个 hstack 区域的灰色，在圆角外渗出。

    }.overlay(
        RoundedRectangle(cornerRadius: 40)
            .stroke(Color.green, lineWidth: 1)
    ).background(Color.gray)

我还尝试将 RoundedRectangle 对象的背景设置为灰色，但随后它将该颜色覆盖在所有内容上，如下所示:



我假设/希望有一种方法可以通过覆盖层影响中间区域(沙漏)背景颜色，但我似乎无法弄清楚如何使其工作。任何建议将不胜感激。

Answer 1

您也可以将形状与背景修改器一起使用，而不是使用颜色。

改变

 }.overlay(
    RoundedRectangle(cornerRadius: 40)
        .stroke(Color.green, lineWidth: 1)
).background(Color.gray)

到

 }.overlay(
    RoundedRectangle(cornerRadius: 40)
        .stroke(Color.green, lineWidth: 1)
).background(RoundedRectangle(cornerRadius: 40).fill(Color.pink)) 

它会起作用。

当然，粉红色只是为了使该区域更加明显。