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

2
votes

I'm trying to get the normal List on the watch with a listRowBackground image on each cell.

But when I set a image as the listRowBackground the corner radius from the standard List disappears (see below).

I've tried to set the background modified in the Cell-View itself, but that results in the same problem. Looking at the Visual View Debugger it seems that the background image, extends well beyond the cell itself.

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

Image: with background image:

w/ background image

Image: without background image:

w/o background image

3
watchkitswiftui
Have you tried adding the image to the ListCell instead of the ListRowBackground? Could be done with a ZStack so the text goes on top of it. I haven't used it on the watch yet, but with iOS, the ListRowBackground covers from side to side, where the "cell" sits on top of that. – ShadowDES
The problem was here to get it to the right size. But combined with .buttonStyle(PlainButtonStyle()) this might have worked. Thanks! – leoMehlig

3 Answers

4
votes

This works for me Xcode 11.5, Just add the .clipped() and .cornerRadius(10) modifiers.

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

Did you try adding clipped() to the NavigationLink?

0
votes

I figured it out!

I wrapped the image inside of a GeometryReader and added clipped() and cornerRadius(10) to the GeometryReader.

And add buttonStyle(PlainButtonStyle()) to the 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)
    }

and then add .listRowBackground(self.backgroundImage()) to the NavigationLink.