Как добавить cornerRadius в ячейку списка SwiftUI при использовании .listRowBackground в watchOS?

Question

Я пытаюсь получить нормальное List на часах с listRowBackground изображением на каждой ячейке.

Но когда я устанавливаю изображение как listRowBackground угловой радиус от стандартногоList исчезает (см. Ниже).

Я пытался установить background, модифицированный в самой ячейке - View, но это приводит к той же проблеме. Глядя на отладчик Visual View, кажется, что фоновое изображение выходит далеко за пределы самой ячейки.

struct ListView: View {
    @ObservedObject var model: ListModel

    var body: some View {
        List {
            ForEach(self.model.items) { item in
                NavigationLink(destination: PlayerView(item: item)) {
                    ListCell(item: item).frame(height: 100)
                }
                .listRowBackground(Image(uiImage: item.image)
                .resizable()
                .scaledToFill()
                .opacity(0.7)
                )
            }
        }
        .listStyle(CarouselListStyle())
        .navigationBarTitle(Text("Today"))

    }
}

@available(watchOSApplicationExtension 6.0, *)
struct ListCell: View {
    var item: ListItem

    var body: some View {
        VStack(alignment: .leading) {
            Text("\(self.item.length) MIN . \(self.item.category)")
                .font(.system(.caption, design: .default))
                .foregroundColor(.green)
                .padding(.horizontal)
                .padding(.top, 2)
            Text(self.item.title)
                .font(.headline)
                .lineLimit(2)
                .padding(.horizontal)
        }
    }
}

Изображение: с фоновым изображением:

Изображение: без фона:

Answer 1

Вы пытались добавить clipped() к NavigationLink?

Answer 2

Я понял!

Я обернул изображение внутри GeometryReader и добавил clipped() и cornerRadius(10) к GeometryReader.

И добавил buttonStyle(PlainButtonStyle())к NavigationLink.

    private func backgroundImage() -> some View {
        return GeometryReader { g in
            Image(<image>)
                .resizable()
                .blur(radius: 2)
                .scaledToFill()
                .frame(width: g.size.width, height: g.size.height)
        }
        .clipped()
        .cornerRadius(10)
    }

и затем добавьте .listRowBackground(self.backgroundImage()) к NavigationLink.