Question

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

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

我尝试使用NSTextAttachment()进行添加，如WWDC19会话中有关SF Symbols所述，但是图像完全没有显示。请参见代码和屏幕截图中的第1节。

我也尝试使用Image(uiImage: UIImage(systemName: "circle")!)，虽然显示了图像，但是行之间的间隔增加了。参见第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

只需尝试在const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); for (let x = 0; x < canvas.width / 8; x+=.1) { const y = (Math.sin(x) * 60) + (canvas.height / 2); ctx.lineTo(x * 8, y); } ctx.setLineDash([4, 4]); ctx.stroke(); document.body.appendChild(canvas);的{{1}}选项之后添加spacing。

第2部分的示例代码如下：

alignment

您也可以使用

VStack

代替

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

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

1 个答案: