ScrollView 内容未填写 SwiftUI

Posted 2023-02-23

【中文标题】ScrollView 内容未填写 SwiftUI

【英文标题】：ScrollView content not filling in SwiftUI

【发布时间】：2019-06-09 11:17:09

【问题描述】：

我有一个滚动视图，其内容是 VStack，其中包含一个 ForEach 循环来创建一些行而不是列表。 List 有一些缺点，比如分隔线。

我的问题是行没有填充滚动视图。我认为滚动视图的宽度没有填满屏幕。

NavigationView 
        Toggle(isOn: $onlineStatus) 
            Text("Online Only")
        .padding([.leading, .trailing], 15)

        ScrollView 
            VStack(alignment: .trailing) 
                ForEach(onlineStatus ? self.notes.filter  $0.dot == .green  : self.notes)  note in
                    NavigationButton(destination: Text("LOL")) 
                        CardRow(note: note)
                            .foregroundColor(.primary)
                            .cornerRadius(8)
                            .shadow(color: .gray, radius: 3, x: 0, y: -0.01)
                    .padding([.leading, .trailing, .top], 5)
                .animation(self.onlineStatus ? .fluidSpring() : nil)
            
        .padding([.leading, .trailing])

        .navigationBarTitle(Text("Your documents"))
    

这给了我这个结果：

那是我的 CardRow：

struct CardRow: View 
var note: Note

var body: some View 
    HStack 
        Image(uiImage: UIImage(named: "writing.png")!)
            .padding(.leading, 10)

        VStack(alignment: .leading) 
            Group 
                Text(note.message)
                    .font(.headline)
                Text(note.date)
                    .font(.subheadline)
            
            .foregroundColor(.black)
        

        Spacer()
        VStack(alignment: .trailing) 
            Circle().foregroundColor(note.dot)
                .frame(width: 7, height: 7)
                .shadow(radius: 1)
                .padding(.trailing, 5)
            Spacer()
        .padding(.top, 5)
    
    .frame(height: 60)
    .background(Color(red: 237/255, green: 239/255, blue: 241/255))

【问题讨论】：

我想问题出在您的 CardRow 视图上。我用一个简单的 Text 元素替换了它，它填满了屏幕。

嗯。我已将 cardRow 添加到问题中

我遇到了同样的问题。唯一对我有帮助的是将ScrollView 替换为List...

@LinusGeffarth 我不想要一个列表。它有丑陋的分隔线

我知道。期待一些真正的答案......@jsbeginnerNodeJS

【参考方案1】：

在 RowView 或其内部使用 .frame(minWidth: 0, maxWidth: .infinity)

【讨论】：

还是一样。

【参考方案2】：

尝试将 RowView 的框架宽度设置为 UIScreen.main.bounds.width： .frame(width: UIScreen.main.bounds.width)

【讨论】：

但是该行正在越过屏幕。我希望宽度是滚动视图宽度

如果我减去我给滚动视图的填充 + 它的行它工作的那个值。

不是真正的问题解决方案。更像是一种解决方法恕我直言→不应该被接受！

@LinusGeffarth 你会怎么做呢？

【参考方案3】：

我找到的最佳解决方案是使用 GeometryReader 将 ScrollView 的内容填充到外部视图的宽度。并确保在每一行的 HStack 中使用 Spacer()。这可以很好地处理安全区域和旋转。

struct Card : View 
    var body: some View 
        HStack 
            VStack(alignment: .leading) 
                Text("Header")
                    .font(.headline)
                Text("Description")
                    .font(.body)
            
            Spacer()
        
            .padding()
            .background(Color.white)
            .cornerRadius(8)
            .shadow(color: Color.black.opacity(0.15), radius: 8, x: 0, y: 0)
    


struct Home : View 
    var body: some View 
        GeometryReader  geometry in
            NavigationView 
                ScrollView 
                    VStack(alignment: .leading, spacing: 16) 
                        Card()
                        Card()
                        Card()
                    
                        .padding()
                        .frame(width: geometry.size.width)
                
                    .navigationBarTitle(Text("Home"))
            
        
    

查看生成的屏幕截图：

【讨论】：

好东西。效果不错

Spacer() 可以解决问题，尤其是当单元格的内容覆盖单元格的一侧（即左侧或右侧）时。所以添加 spacer() 会占用内容之后的空间，直到父级占用的空间结束