SwiftUI:列出单元格背景颜色和列表背景颜色?

时间:2021-07-29 21:31:15

标签: swiftui

我有以下观点:

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

编辑模式非活动

enter image description here

编辑模式活动

enter image description here

当我进入编辑模式时,我希望整个单元格仍然具有蓝色背景色,而不是左侧和右侧的黑色。

问题

在编辑模式下,如何保持整个单元格的背景颜色为蓝色,而不是左右为黑色?

1 个答案:

答案 0 :(得分:3)

列表行有自己的背景修饰符:.listRowBackground()

变化:

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

到:

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