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

您需要的是再一个修饰符，用于剪掉绿色边框之外的所有内容，并在.background之后添加：

.clipShape(RoundedRectangle(cornerRadius: 40))

编辑

Capsule是更好的形状，可用来代替RoundedRectangle来实现匹配的曲线：

var body: some View {
    HStack {
        Text("Login")
            .font(.headline)
            .foregroundColor(showLogin ? Color.white : .black)
            .padding()
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Capsule().fill(showLogin ? Color.green : .gray))
            .onTapGesture { self.showLogin = true }
        Text("Join")
            .font(.headline)
            .foregroundColor(!showLogin ? Color.white : .black)
            .padding()
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Capsule().fill(!showLogin ? Color.green : .gray))
            .onTapGesture { self.showLogin = false }
    }   .background(Capsule().fill(Color.gray))
        .overlay(Capsule().stroke(Color.green, lineWidth: 1))

}

Answer 2

您还可以将形状与背景修饰符一起使用，而不是使用颜色。

更改

 }.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))

，它将起作用。

当然，粉红色只能使该区域更明显。

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

2 个答案: