带有 SwiftUI 的 Apple Watch 上列表项的背景

Question

我正在使用 SwiftUI 构建 Apple Watch 屏幕。布局工作得很好，但我似乎无法弄清楚颜色样式的某些方面。这是我的代码：

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)
        }
    }
}

下面是渲染效果的截图：

您会注意到 HStack 的蓝色背景仅覆盖一个矩形区域，而不是列表似乎自动创建的整个按钮。奇怪的是，虽然列表支持背景修饰符，但它似乎被忽略了——没有什么是绿色的。

我很想做的是确定整个按钮的背景，但我想不出这样做的方法——无论发生什么恶作剧，HStack 周围都顽固地保持深灰色我试试。

Answer 1

尝试将您的body替换为可以使整个按钮为蓝色的

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)
    }
}

带有 SwiftUI 的 Apple Watch 上列表项的背景

Background for List Items on Apple Watch with SwiftUI

apple-watch

swiftui

vstack