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

Posted 2023-02-24

【中文标题】如何使用 SwiftUI 中的图像修复 NavigationView 列表行中增加的高度"

【英文标题】：How to fix increased height in NavigationView List row with Images in SwiftUI"

【发布时间】：2019-07-31 19:34:29

【问题描述】：

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

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

我尝试使用NSTextAttachment() 添加，如 SF Symbols 的 WWDC19 会议中所述，但根本没有显示图像。请参阅代码和屏幕截图中的第 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 节）不起作用，以及如何修复间距？

【问题讨论】：

有人能重现这个问题或知道如何解决吗？

【参考方案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")!)

【讨论】：

感谢您的帮助，添加spacing: 0 工作正常！