在 SwiftUI 视图中插入非列表元素

Posted 2023-02-24

【中文标题】在 SwiftUI 视图中插入非列表元素

【英文标题】：Inserting non-list elements in a SwiftUI view

【发布时间】：2021-09-30 03:20:02

【问题描述】：

我正在开发一个 SwiftUI 页面，该页面由一个包含一些行的表格视图组成，但我也希望在其中包含一些非单元格元素。我目前对此有一些问题，我尝试了各种不同的途径。我基本上只需要一些没有包裹在单元格内的元素，同时仍然保持 tableview 的灰色背景。在下面的示例中，我试图在表格行下方获取图像。

下面是我的代码：

import SwiftUI


struct ContentView: View 
    private var color = Color(red: 32/255, green: 35/255, blue: 0/255)
    var body: some View 
        NavigationView 
            Form 
                Section() 
                    HStack 
                        Text("AA")
                            .foregroundColor(color)
                        
                    
                    HStack 
                        Text("B")
                            .foregroundColor(color)
                        
                    
                    HStack 
                        Text("C")
                            .foregroundColor(color)
                        
                    
                    HStack 
                        Text("D")
                            .foregroundColor(color)
                    
                    HStack 
                        Text("E")
                            .foregroundColor(color)
                        
                    
                    HStack 
                        Text("F")
                            .foregroundColor(color)
                       
                    
                    HStack 
                        Text("G")
                            .foregroundColor(color)
                       
                    
                
                
            .navigationBarTitle(Text("Page"))
            
            HStack 
                Image(systemName: "fallLeaves")
            
            
        
        
        
    


struct ContentView_Previews: PreviewProvider 
    static var previews: some View 
        ContentView()
    

以下是我尝试过的所有不成功的方案：

场景 1：在 List 之外添加带有图像的 HStack。 （当前代码显示的内容）这不会显示图像，因为表格视图会占据整个视图。

场景 2：在列表块中添加带有图像的 HStack。这像这样将图像包裹在单元格周围

场景 3：包装列表并且 HStack 包含 VStack 内的图像。这不好，因为它基本上就像具有两个不同视图的分屏。表格缩小并有自己的滚动条。注意下图中的滚动条

理想的解决方案应该是这样的，但我不确定要尝试什么，因为我无法让它看起来像这样，它是一个连续视图并且图像不在单元格中

【问题讨论】：

1.使用节页脚。 2 它的Image("fallLeaves") 3. 从它的声音来看，您不希望 HStack 包装您的图像

【参考方案1】：

我会让你算出填充和舍入。

    struct ContentView: View 
        private var color = Color(red: 32/255, green: 35/255, blue: 0/255)
        
        var body: some View 
            NavigationView 
                Form 
                    Section(content: 
                        HStack 
                            Text("AA")
                                .foregroundColor(color)
                            
                        
                        HStack 
                            Text("B")
                                .foregroundColor(color)
                            
                        
                    , footer: 
                        Image("fallLeaves")
                    )
                .navigationBarTitle(Text("Page"))
            
        
    
    
    struct ContentView_Previews: PreviewProvider 
        static var previews: some View 
            ContentView()