How to fix increased height in NavigationView List row with Images in SwiftUI"

Question

I'm using Xcode 11 beta 5 and iPhone SE with iOS 13 beta 5.

In my app I have a NavigationView where each List row contains of two lines. I now want to add an Image(systemName: "circle") at the end of the text of the 2nd text line. When doing that, the space between the first and second text line increases.

I tried with adding using NSTextAttachment() as described in the WWDC19 session on SF Symbols, but the image isn't shown at all. See Section 1 in the code and screenshot.

I also tried using using Image(uiImage: UIImage(systemName: "circle")!), the image is shown but the space between the lines increased. See Section 2.

Also, for reference, when just using text, the line spacing as shown in Section 3 is what I want to have.

The code I used is:

import SwiftUI

struct ContentView: View {

    func appendSymbol(string: String /*, image:UIImage*/ )-> String {
        let mutableString = NSMutableAttributedString(string: string)
        let circleImage = UIImage(systemName: "circle")
        let redCircleImage = circleImage?.withTintColor(.red, renderingMode: .alwaysOriginal)
        let circleAttachment = NSTextAttachment(image: redCircleImage!)
        let circleString = NSAttributedString(attachment: circleAttachment)

        mutableString.insert(circleString, at: 3)
        return mutableString.string
    }

    var body: some View {
        NavigationView {
            List {
                Section(header: Text("Section 1")) {
                    HStack {
                        VStack (alignment: .leading) {
                            HStack {
                                Text("Text 1.1")
                            }
                            .border(Color.red)
                            HStack {
                                Text(appendSymbol(string: "Tex   t 1.2"))
                            }
                            .border(Color.green)
                        }
                        .border(Color.red)
                    }
                    .border(Color.red)
                }

                Section(header: Text("Section 2")) {
                    HStack {
                        VStack (alignment: .leading) {
                            HStack {
                                Text("Text 2.1")
                            }
                            .border(Color.red)
                            HStack {
                                Text("Text 2.2")
                                Image(uiImage: UIImage(systemName: "circle")!)
                            }
                            .border(Color.green)
                        }
                        .border(Color.red)
                    }
                    .border(Color.red)
                }

                Section(header: Text("Section 3")) {
                    HStack {
                        VStack (alignment: .leading) {
                            HStack {
                                Text("Text 3.1")
                            }
                            .border(Color.red)
                            HStack {
                                Text("Text 3.1")
                                Text("circle")
                            }
                            .border(Color.red)
                        }
                        .border(Color.red)
                    }

                }

            }
        }
    }
}

Screenshot using the included code

Any idea why the first code (Section 1) isn't working, and how to fix the spacing?

Can someone reproduce this issue or knows how to fix? – AnErd Aug 08 '19 at 18:15 — AnErd, Aug 08 '19 at 18:15

score 0 · Accepted Answer · answered Aug 22 '19 at 21:55

Simply try adding spacing after the alignment option of your VStack.

Example code for Section 2 would be like this:

Section(header: Text("Section 2")) {
    HStack {
        //adding the spacing option for the VStack
        VStack (alignment: .leading, spacing: 0) {
            HStack {
                Text("Text 2.1")
            }
            .border(Color.red)
            HStack {
                Text("Text 2.2")
                Image(uiImage: UIImage(systemName: "circle")!)
            }
            .border(Color.green)
        }
        .border(Color.red)
    }
    .border(Color.red)
}

You could also use

Image(systemName: "circle")

instead of

Image(uiImage: UIImage(systemName: "circle")!)

Thanks for your help, adding `spacing: 0` works fine! – AnErd Aug 23 '19 at 11:01 — AnErd, Aug 23 '19 at 11:01

How to fix increased height in NavigationView List row with Images in SwiftUI"

1 Answers1