在 watchOS 中使用 .listRowBackground 时如何将 cornerRadius 添加到 SwiftUI List Cell？

Question

我正在尝试在手表上获得正常 List，每个单元格上都有一个 listRowBackground 图像。

但是当我将图像设置为 listRowBackground 时，标准 List 的角半径消失了（见下文）。

我试图设置在 Cell-View 本身中修改的 background，但这导致了同样的问题。查看 Visual View Debugger，背景图像似乎远远超出了单元格本身。

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。

Answer 3

这对我有用 Xcode 11.5，只需添加 .clipped() 和 .cornerRadius(10) 修饰符。

List {
         Text("Sample cell text")
            .listRowBackground(
               Color(.blue)
               .clipped()
               .cornerRadius(10))
      }

在 watchOS 中使用 .listRowBackground 时如何将 cornerRadius 添加到 SwiftUI List Cell？

How to add cornerRadius to SwiftUI List Cell when using .listRowBackground in watchOS?

watchkit

swiftui