Changing the color of a Button in SwiftUI on tvOS

问题

I am trying to change the color of a SwiftUI Button on tvOS.

Modifying the background almost works, except that you can see that the underlying UIButton is actually using a rounded, translucent image over the top of the background. This results in a different colour at the corners where the rectangular background lies outside the rounded image.

Adding .padding emphasises this issue:

struct ContentView: View {

    @State
    var selected = false

    var body: some View {

        Button(action: {
            self.selected.toggle()
        }) {
               Text($selected.wrappedValue ? "On":"Off")
                .foregroundColor(.white)
            }.padding(.all)
             .background(self.selected ? Color.green : Color.blue)
        }
    }
}

A related issue is the changing the color of the "focus" view, as I suspect that this is the same view as the button itself, transformed win size and color.

The typical technique in tvOS with a UIButton is to change the button image, but there doesn't seem to be any way to access the image of the underlying UIButton.

回答1:

Again, I have only checked it on iOS, but this should help:

struct ContentView: View {

    @State var selected = false

    var body: some View {

        Button(action: { self.selected.toggle() }) {
            Text($selected.wrappedValue ? "On":"Off")
                .foregroundColor(.white)
        }   .padding(.all)
            .background(RoundedRectangle(cornerRadius: 5.0)
                            .fill(self.selected ? Color.green : Color.blue))

    }
}

You can pass any view into .background() modifier, so you might also want to try placing an Image() in there.

回答2:

This code seems to work fine on iOS but, as you've shown, in tvOS the underlying UIButton is visible. I'm not sure how to get at the underlying button or its image, but it seems you can hack it for now (until Apple either fixes the issue or provides a way to get at that button.)

First, move the padding up to modify the Text so that it will properly affect the underlying button.

Second, (and this is the hack) clip the view after the background modifier with a cornerRadius. As long as the radius is equal to or greater than that of the underlying button, it will clip off the excess background. (Of course, what you see is not the green Color, but the color resulting from the green color superimposed on the gray of the translucent button image. At least that's how it's shown in Xcode.)

struct ContentView: View {

    @State var selected = false

    var body: some View {

        Button(action: {
            self.selected.toggle()
        }) {
            Text($selected.wrappedValue ? "On":"Off")
                .foregroundColor(.white)
                .padding(.all)
        }
        .background(self.selected ? Color.green : Color.blue)
        .cornerRadius(5)
    }
}

来源：https://stackoverflow.com/questions/58001370/changing-the-color-of-a-button-in-swiftui-on-tvos