SwiftUI 为填充元素的列表元素设置单独的背景

Question

所以我试图制作一个列表，其中每个元素的背景是一个完全填充元素的图像，我正在努力让它完全填充该区域。

这是一些简单的示例代码，显示了我到目前为止所拥有的内容。

struct Event {
    var description:String = "description"
    var title:String = "Title"
    var view:Image
}

struct RowView: View {
    @State var event:Event
    
    var body: some View {
        VStack {
            Text(event.title)
                .font(.headline)
            Text(event.description)
                .font(.subheadline)
        }
    }
}
struct ContentView: View {
    @State var events:[Event] = [Event(view: Image("blue")),Event( view: Image("red")),Event( view: Image("green"))]
    @State private var editMode = EditMode.inactive
    
    var body: some View {
        NavigationView {
            List() {
                ForEach(events.indices, id: \.self) { elementID in
                    NavigationLink(
                        destination: RowView(event: events[elementID])) {
                    RowView(event: events[elementID])
                    }
                        .background(events[elementID].view)
                        .clipped()
                }
            }
            .listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
            .navigationTitle("Events")
            .navigationBarItems(leading: EditButton())
            .environment(\.editMode, $editMode)
        }
    }
}

这是代码生成的内容，因为您可以看到背景图像周围仍然有一个边框。

Answer 1

我不知道你的图片是什么，但似乎这不重要。 这是使用颜色复制代码的演示。

使用 Xcode 12.1 / iOS 14.1 测试

修改部分（重要的在评论中突出显示）

struct Event {
    var description:String = "description"
    var title:String = "Title"
    var view:Color
}

struct ContentView: View {
    @State var events:[Event] = [Event(view: .blue),Event( view: .red),Event( view: .green)]
    @State private var editMode = EditMode.inactive
    
    var body: some View {
        NavigationView {
            List() {
                ForEach(events.indices, id: \.self) { elementID in
                    events[elementID].view.overlay(     // << this !!
                       NavigationLink(
                        destination: RowView(event: events[elementID])) {
                           RowView(event: events[elementID])
                    })
                }
                .listRowInsets(EdgeInsets())   // << this !!
            }
            .listStyle(PlainListStyle())    // << and this !!
            .navigationTitle("Events")
            .navigationBarItems(leading: EditButton())
            .environment(\.editMode, $editMode)
        }
    }
}

Answer 2

这有效：

struct RowView: View {
    @State var event:Event

    var body: some View {
        VStack(alignment: .leading) {
            Text(event.title)
                .font(.headline)
            Text(event.description)
                .font(.subheadline)
        }
        .padding(10)
        .foregroundColor(.yellow)
    }
}
struct ContentView: View {
    @State var events:[Event] = [Event(view: Image("blue")),Event( view: Image("red")),Event( view: Image("green"))]
    @State private var editMode = EditMode.inactive

    var body: some View {
        NavigationView {
            List() {
                ForEach(events.indices, id: \.self) { elementID in
                    NavigationLink(
                        destination: RowView(event: events[elementID])) {
                        RowView(event: events[elementID])
                    }
                    .background(events[elementID].view
                                    .resizable()
                                    .aspectRatio(contentMode: .fill)
                    )

                    .clipped()
                }
                .listRowInsets(EdgeInsets())
            }
            .listStyle(PlainListStyle())
            .navigationTitle("Events")
            .navigationBarItems(leading: EditButton())
            .environment(\.editMode, $editMode)
        }
    }
}

这是 Asperi 答案的衍生物，因此您可以接受他的答案，但这适用于图像，并且没有叠加。 在 Xcode 12.1、IOS 14.1 上测试。

这是我从 Goggle 中抓取任意大小的“红色”、“绿色”和“蓝色”图像的图像。 我冒昧地将行文本更改为黄色，以便更好地显示。