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

【问题标题】：Inserting non-list elements in a SwiftUI view在 SwiftUI 视图中插入非列表元素
【发布时间】：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 包装您的图像

标签： swift swiftui swiftui-list

【解决方案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()
        }
    }

【讨论】：