How do you fill entire Button area with background View in WatchOS? - swift

Question

I am trying to have my background view span the entire area of a Button on an Apple Watch form factor.
struct SurveyView: View {
var body: some View {
Button(action: {
print("Test tapped.")
}) {
HStack {
Text("Test")
.fontWeight(.semibold)
}
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(LinearGradient(gradient: Gradient(colors: [.green, .blue]), startPoint: .leading, endPoint: .trailing))
}
}
}
How can I make the background span the entire Button?
Update: Turns out my issue is also related to being in a List View. Setting a mask doesn't quite solve it.
struct SurveyView: View {
var body: some View {
List() {
Button(action: {
print("Test tapped.")
}) {
Text("Test")
.fontWeight(.semibold)
}
.background(Color.orange)
.mask(RoundedRectangle(cornerRadius: 24))
}
}
}

Answer 1

I would do this in the following way:
Button(action: {
print("Test tapped.")
}) {
Text("Test")
.fontWeight(.semibold)
.padding()
.foregroundColor(.white)
}
.background(LinearGradient(gradient: Gradient(colors: [.green, .blue]), startPoint: .leading, endPoint: .trailing))
.mask(RoundedRectangle(cornerRadius: 24))
Update: the case for list
var body: some View {
List() {
Button(action: {
print("Test tapped.")
}) {
Text("Test")
.fontWeight(.semibold)
.padding()
}
.background(Color.orange)
.mask(RoundedRectangle(cornerRadius: 24))
.listRowPlatterColor(Color.clear)
}
}