SwiftUI Background Colors для слоев в пользовательском элементе управления

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

РЕДАКТИРОВАТЬ

КапсулаЛучшая форма для использования вместо 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)) 

, и это будет работать.

Конечно, розовый цвет только для того, чтобы сделать область более заметной.