Question

我正在努力删除SwiftUI中自定义圆形Button元素的背景，该元素的定义如下：

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

这会导致按钮周围出现一个矩形的浅灰色背景，我希望它不会在此处显示：

我试图在按钮上附加一个“背景”修饰符，它表现出非常奇怪的行为：如果将其设置为“ Color.clear”，则没有任何效果。但是，如果我将其设置为“ 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(PlainButtonStyle())。

您会遇到这样的事情：

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

Answer 2

声明自己的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 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)
    }
}

在SwiftUI（WatchKit）中删除圆形按钮背景

3 个答案: