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

Question

I don't want the behavior I'm getting with this SwiftUI thing (first time messing with it). I've been putting .background() on everything and there's some kind of padding happening and some sort of dividing line, whether I enable the Button code or not (pic below is with Button code commented out).

What do I need to do to fix it?

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

Does this answer your question https://stackoverflow.com/a/71044620/12299030, and https://stackoverflow.com/a/60910124/12299030? (Possible duplicate) — Asperi, Apr 11 '22 at 05:57
Also this one https://stackoverflow.com/a/62598818/12299030? — Asperi, Apr 11 '22 at 06:04

score 1 · Answer 1 · answered Apr 11 '22 at 04:43

1

I believe the color specification for your hstack and frames is supposed to be "(Color.black)" instead of just "(.black)".

Which type of color you use isn't consistent across all Swift objects. Some objects, such as UITableView use "UI colors" which are in the form ".black", while others, like frames, vstacks, hstacks and other objects, use SwiftUI colors in the form "Color.black".

I recommend this very informative page for a very accessible explanation of using color in a view and a stack.

answered Apr 11 '22 at 04:43

GlennP

9
4

1

`.black` is actually valid code. See 'Implicit Member Expression': https://docs.swift.org/swift-book/ReferenceManual/Expressions.html#ID394 – Alexander Sandberg Apr 11 '22 at 05:58
1

@clearlight This is not the cause of your issue though. See Asperi's comments on your question or Jolly's answer: https://stackoverflow.com/a/71822825/780291 – Alexander Sandberg Apr 11 '22 at 06:12
Thanks for clarifying that. Swift is a little tricky when coming from a C background. – GlennP Apr 11 '22 at 13:47

score 1 · Accepted Answer · answered Apr 11 '22 at 04:51

instead of putting .background on the HStack, use

.listRowBackground(Color.black)

and for separator use

 .listRowSeparator(.hidden)

Keep in mind, this is on the HStack not the List

Full Code:

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

Note: `self.background(.black)` and `.background(.black)` applied to the Button can also be removed. — Alexander Sandberg, Apr 11 '22 at 05:52

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

2 Answers2