Удалить фон круглой кнопки в SwiftUI (WatchKit)

Question

Я изо всех сил пытаюсь удалить фон пользовательского круглого элемента Button в SwiftUI, который определяется следующим образом:

struct NavButton: View {
    var body: some View {
        Button(action: {})
            VStack {
                Text("Button")
            }
            .padding(40)
            .background(Color.red)
            .font(.title)
            .mask(Circle())
        }
    }
}

В результате получается прямоугольный светло-серый фон вокруг кнопки, где я хочучтобы не отображалось:

Я попытался добавить модификатор «background» к кнопке, и он демонстрирует очень странное поведение: если для него установлено значение«Color.clear», нет эффекта. Но если я установлю его на «Color.green», он изменит фон, как и ожидалось.

Пример установки модификатора «Background» на «Color.green»:

struct NavButton: View {
        var body: some View {
            Button(action: {})
                VStack {
                    Text("Button")
                }
                .padding(40)
                .background(Color.red)
                .font(.title)
                .mask(Circle())
            }
            .background(Color.green) // has no effect if set to "Color.clear"
        }
    }

Интересно, я что-то здесь упускаю?

PS: я использую Xcode 11.1 (11A1027)

Answer 1

Объявите свой собственный ButtonStyle:

struct RedRoundButton: ButtonStyle {

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(40)
            .font(.title)
            .background( Circle()
                .fill(Color.red))
    }

}

и используйте его следующим образом:

Button("Button") {}
    .buttonStyle(RedRoundButton())

Answer 2

Попробуйте добавить .buttonStyle(PlainButtonStyle()) к самой кнопке.

У вас будет что-то вроде этого:

    Button(action: {}){
        VStack{
            Text("Button")
        }
        .padding(40)
        .background(Color.red)
        .font(.headline)
        .mask(Circle())  
    }
    .buttonStyle(PlainButtonStyle())

Answer 3

Попробуйте это:

struct ContentView: View {
    var body: some View {
        Button(action: {}) {
            Text("Button")
            .frame(width: 80, height: 80)
        }
        .background(Color.red)
        .cornerRadius(40)
        .frame(width: 80, height: 80)
    }
}