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

b91juud3 于 2023-01-01 发布在 Swift

关注(0)|答案(2)|浏览(167)

我正在处理一个SwiftUI页面，它由一个带有一些行的表视图组成，但我也希望在其中包含一些非单元格元素。我目前遇到一些问题，我尝试了各种不同的方法。我基本上只需要在其中包含一些元素，这些元素不包含在单元格中，同时仍然保持表视图的灰色背景。在下面的示例中，我正试着在表行的正下方获取图像。
下面是我的代码：

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，使图像位于List之外。（当前代码所显示的内容）这不会使图像显示出来，因为表格视图占用了整个视图。
- - 情况2**：在列表块中添加带有图像的HStack。这将像这样把图像围绕在单元格周围

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

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

swift

来源：https://stackoverflow.com/questions/69385686/inserting-non-list-elements-in-a-swiftui-view

2条答案

按热度按时间

4nkexdtk1#

我会让你解决填充和四舍五入的问题。

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

赞(0）回复(0）举报 2023-01-01

093gszye2#

您还可以使用将组件（事件页面视图）放置在单元格内.
可以做些什么;
1.使用Section可以在初始化另一个单元格时具有良好的样式（因为我们将使下面的单元格透明）
1.创建新的节
1.放置/任意视图
1.将.listRowBackground(Color.clear)添加到新视图中;以透明地看到背景。
1.将.listRowSeparator(.hidden)添加到新视图中;以移除下面的细胞系。
在这些之后，你将得到一个带有额外填充的放置视图。如果这很重要，你可以使用填充来捕捉0填充距离。同样，通过使用这些类型的样式.listStyle(.grouped)来改变列表样式（对于第二组），你可以捕捉0填充/间距。
页脚解决方案可以用于图片，但是当你需要一些文本时，你会发现它会缩小尺寸，所以我的解决方案是使用单元格视图并将其显示为非单元格项;
这是我的零钱，它起作用了（至少我认为）

import SwiftUI

struct ContentView: View {
    private var color = Color(red: 32/255, green: 35/255, blue: 255/255)
    // Just changed color to test my changes better.
    // private var color = Color(red: 32/255, green: 35/255, blue: 0/255)
    var body: some View {
        NavigationView {
            Form {
                Section() {
                    Text("AA")
                    Text("B")
                    Text("C")
                    Text("D")
                    Text("E")
                    Text("F")
                    Text("G")
                }
                //foreground color won't colorize the cell's bottom lines
                .foregroundColor(color)
                
                Section{
                    HStack{
                        // Use Spacer or another horizontal alignment
                        // I just tried with another image, you can place yours with full width and remove the Spacer() 's
                        Spacer()
                        Image(systemName: "checkmark.seal.fill")
                            .resizable()
                            .scaledToFit()
                            .foregroundColor(color)
                            .frame(width: 100)
                        Spacer()
                    }
                    .listRowBackground(Color.clear)
                    // Not required for single items; but would be usefull, if you'll add more views or sections
                    .listRowSeparator(.hidden)
                }
            }.navigationBarTitle(Text("Page"))
        }
    }
}

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

这就是为什么你的方法行不通
场景1：使用VStack和HStack会将屏幕拆分为不同的可滚动部分。这是根据设计，在SwiftUI中List元素覆盖Stacks和ScrollableView
(Reference)
场景2：与场景1相同
场景3：实际上，这与场景1相同
你可以尝试三件事：
1.我的解决方案，我看不出有什么大问题
1.页脚解决方案，这可以工作，但对于某些视图，你会有问题
1.确定ZStack中的背景颜色，并开发一个类似于单元格视图的自定义按钮对象（缺点：非本地方式和耗时较长的解决方案）

赞(0）回复(0）举报 2023-01-01

我来回答

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

2条答案

相关问题

热门标签

最新问答