CODEWITHSUNDEEP
swiftui
zumzum
zumzum

Reputation: 20158

SwiftUI: List cell background color and List background color?

I have the following view:

struct ContentViewTest: View {
    
    @State private var editMode = EditMode.inactive
    
    
    var body: some View {
        
        NavigationView {
            
            List {
                
                ForEach(0..<10) {
                    Row(item: $0)
                        .background(Color(.blue))
                        
                }
                .onDelete { s in
                    
                }
                .onMove { s, index in
                    
                }
                
                    
            }
            .onAppear {
                UITableView.appearance().backgroundColor = .clear
            }
            .listStyle(.plain)
            .background(Color(.blue))
            .navigationBarTitle("Test")
            .environment(\.editMode, $editMode)
            .navigationBarItems(leading: navActionsView)
            
        }
        .statusBar(hidden: true)
        
    }
    
    var navActionsView: some View {
        
        return HStack {
            
            Button(action: {
                
                withAnimation(.spring()) {
                    switch editMode {
                        case .active:
                            editMode = .inactive
                        case .inactive:
                            editMode = .active
                        case .transient:
                            editMode = .inactive
                        @unknown default:
                            editMode = .inactive
                    }
                }
                
                
            }) {
                switch editMode {
                    case .active:
                        Text("Done")
                    case .inactive:
                        Text("Edit")
                    case .transient:
                        Text("")
                    @unknown default:
                        Text("Edit")
                }
                
            }
        }
    }
    
    
}

extension HorizontalAlignment {
   private enum MyLeadingAlignment: AlignmentID {
      static func defaultValue(in dimensions: ViewDimensions) -> CGFloat {
         return dimensions[HorizontalAlignment.leading]
      }
   }
   static let leadingA = HorizontalAlignment(MyLeadingAlignment.self)
}

struct Row: View {
    let item: Int
    var body: some View {

        VStack(alignment: .leadingA) {
            HStack {
                Text("item: \(item)")
                Text("Some text")
                    .alignmentGuide(.leadingA) { $0[.leading] }
                Spacer()
            }
            Image(systemName: "squareshape.fill")
                .resizable()
                .frame(width: 30, height: 30)
                .alignmentGuide(.leadingA) { $0[.leading] }
        }
    }
}

Edit mode inactive:

enter image description here

Edit mode active:

enter image description here

When I enter edit mode, I want the entire cell to still have a blue background color, instead, it's black on the left and on the right.

Question:

In edit mode active, how can I keep the background color blue on the entire cell and not have the black on left and right?

Upvotes: 1

Views: 189

Answers (1)

Yrb
Yrb

Reputation: 9685

List rows have their own background modifier: .listRowBackground()

Change:

Row(item: $0)
     .background(Color(.blue))

to:

Row(item: $0)
     .listRowBackground(Color.blue)

Upvotes: 3

Related Questions