VStack 中的 HStack 如何强制背景颜色 + 摆脱分界线？

Question

我不想要这个 SwiftUI 的行为（第一次弄乱它）。我一直在把 .background() 放在所有东西上，无论我是否启用 Button 代码，都会出现某种填充和某种分界线（下图是 Button 代码被注释掉的情况）。

我需要做什么来修复它？

        var body: some View {
            ZStack() {

                Color.black
                    .ignoresSafeArea(.all)
    
                VStack(alignment: .leading, spacing: 0) {
                    List(eventFields) { eventField in
                        HStack() {
                
                            Spacer(minLength: 10)

                            if let iconName = eventField.iconName {
                                Button(action: {
                                    print("edit \(eventField.name)")
                                }, label: {
                                    Image(uiImage: UIImage(named: iconName)!.colorizeMask(eventField.iconColor!))
                                            .frame(width: 27, height: 27)
                                    self.background(.black)
                                }).background(.black)
                            } else {
                                Text("")
                                    .frame(width: 27)
                            }

                            Text(eventField.iconName == nil ? "" : eventField.name)
                                .font(.system(size: eventField.labelFontSize))
                                .foregroundColor(eventField.labelFontColor)
                                .frame(width: 50, alignment: .trailing)
                
                            Spacer(minLength: 3)
                
                            Text(eventField.stringValue)
                                .font(.system(size: eventField.fontSize))
                                .foregroundColor(eventField.fontColor)
                                .frame(width: 200, alignment: .leading)
                            Spacer(minLength: 10)

                        }.background(.black)
                    }.background(.black)
                }
            }
        }
    }

Answer 1

我认为您的 hstack 和框架的颜色规范应该是“(Color.black)”，而不仅仅是“(.black)”。

您使用的颜色类型在所有 Swift 对象中并不一致。某些对象，例如 UITableView 使用“UI 颜色”，格式为“.black”，而其他对象，例如 frames、vstacks、hstacks 和其他对象，使用 SwiftUI 颜色，格式为“Color.black”。

我推荐 this very informative page 以获得在视图和堆栈中使用颜色的非常易于理解的解释。

Answer 2

不要将 .background 放在 HStack 上，而是使用

.listRowBackground(Color.black)

并用于分隔符

 .listRowSeparator(.hidden)

记住，这是在 HStack 上而不是列表上

完整代码：

 var body: some View {
            ZStack() {

                Color.black
                    .ignoresSafeArea(.all)
    
                VStack(alignment: .leading, spacing: 0) {
                    List(eventFields) { eventField in
                        HStack() {
                
                            Spacer(minLength: 10)

                            if let iconName = eventField.iconName {
                                Button(action: {
                                    print("edit \(eventField.name)")
                                }, label: {
                                    Image(uiImage: UIImage(named: iconName)!.colorizeMask(eventField.iconColor!))
                                            .frame(width: 27, height: 27)
                                    self.background(.black)
                                }).background(.black)
                            } else {
                                Text("")
                                    .frame(width: 27)
                            }

                            Text(eventField.iconName == nil ? "" : eventField.name)
                                .font(.system(size: eventField.labelFontSize))
                                .foregroundColor(eventField.labelFontColor)
                                .frame(width: 50, alignment: .trailing)
                
                            Spacer(minLength: 3)
                
                            Text(eventField.stringValue)
                                .font(.system(size: eventField.fontSize))
                                .foregroundColor(eventField.fontColor)
                                .frame(width: 200, alignment: .leading)
                            Spacer(minLength: 10)

                        }
                        .listRowBackground(Color.black)
                        .listRowSeparator(.hidden)
                    }
                }
            }
        }
    }

VStack 中的 HStack 如何强制背景颜色 + 摆脱分界线？

HStack in VStack How can I force background color + get rid of dividing lines?

swiftui