0

I'm working on building an Apple Watch screen in SwiftUI. The layout is working nicely, but there are aspects of the color styling that I can't seem to figure out. Here's my code:

struct Watch3ThingsMainUI: View {
    var goals: [Goal]

    var body: some View {

        VStack {
            Text("3things")
                .foregroundColor(Color("3thingsBlue"))

            List(goals) { goal in
                HStack {
                    Text(goal.name)

                    Spacer()

                    Image(systemName: "gear")
                }
                .background(Color.blue)
            }
            .background(Color.green)
            .foregroundColor(Color.red)
            .accentColor(Color.yellow)
        }
    }
}

And here's a shot of how it renders:

sample screen shot

You'll note that the HStack's blue background only covers a rectangular area, not the whole button that the List seems to create automatically. And oddly, while the List supports a background modifier, it appears to be ignored -- nothing is colored green.

What I'd love to be able to do is to determine the background for the entire button, but I can't figure a way to do so -- it remains stubbornly dark gray around the HStack no matter what shenanigans I try.

Sean McMains
  • 53,635
  • 12
  • 43
  • 52
  • You might find helpful my answer in this post [How do you fill entire Button area with background View in WatchOS?](https://stackoverflow.com/a/59403085/12299030) – Asperi Jan 01 '20 at 06:01
  • Does this answer your question? [How to style rows in SwiftUI List on WatchOS?](https://stackoverflow.com/questions/58434622/how-to-style-rows-in-swiftui-list-on-watchos) – LuLuGaGa Jan 01 '20 at 12:13

1 Answers1

4

Try to replace your body with that can make the whole button is blue

var body: some View {

    VStack {
        Text("3things")
            .foregroundColor(Color("3thingsBlue"))
        List {
            ForEach(self.goals) { goal in
                HStack {
                    Text(goal.name)
                    Spacer()
                    Image(systemName: "gear")
                }
                .listRowBackground(Color.blue)
            }
        }
        .foregroundColor(Color.red)
        .accentColor(Color.yellow)
    }
}
Liem Vo
  • 4,081
  • 2
  • 15
  • 14