如何使用 SwiftUI 中的图像修复 NavigationView 列表行中增加的高度”

Question

我正在使用 Xcode 11 beta 5 和 iPhone SE 以及 iOS 13 beta 5。

在我的应用程序中，我有一个 NavigationView，其中每个列表行包含两行。我现在想在第二个文本行的文本末尾添加一个 Image(systemName: "circle") 。这样做时，第一行和第二行文本之间的 space 会增加。

我尝试使用 NSTextAttachment() 添加，如 SF Symbols 上 WWDC19 session 中所述，但图像根本没有显示。请参阅代码和屏幕截图中的第 1 部分。

我也试过使用 Image(uiImage: UIImage(systemName: "circle")!)，图像显示了，但线条之间的 space 增加了。请参阅第 2 节。

另外，仅供参考，当仅使用文本时，第3节中所示的行距是我想要的。

我使用的代码是：

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

知道为什么第一个代码（第 1 部分）不起作用，以及如何修复间距？

Answer 1

只需尝试在 VStack 的 alignment 选项后添加 spacing。

第 2 节 的示例代码如下：

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

您也可以使用

Image(systemName: "circle")

而不是

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

如何使用 SwiftUI 中的图像修复 NavigationView 列表行中增加的高度”

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

swiftui

xcode11