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

Matt 发表于 Dev

马特

我正在处理一个 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：添加一个 HStack 与列表之外的图像。（当前代码显示的内容）这不会显示图像，因为表格视图占据了整个视图。
场景 2：在列表块中添加带有图像的 HStack。这像这样将图像包裹在单元格周围

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

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

库比

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。