Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 719
leoMehlig Avatar asked Mar 03 '23 08:03

leoMehlig


1 Answers

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))
      }
like image 126
Dimitar Stefanovski Avatar answered Mar 15 '23 23:03

Dimitar Stefanovski