时间戳

首页 > 解决方案 > ForEach 视图 SwiftUI 之间的奇怪空间

swift - ForEach 视图 SwiftUI 之间的奇怪空间

问题描述

我有这样的代码：

ForEach(listItems, id: \.self){ item in
                HStack{
                    Button(action: {
                        actionSheet()
                    }) {
                        HStack(spacing: 10) {
                            Image(item.img)
                            Text(item.title)
                                .modifier(TextHandler(fontSize: 16, rgbArray: [47,47,47]))
                                .padding(.leading,10)
                        }
                    }.padding(.all,20)
                    
                    Spacer()
                }
                .background(Color(red: listItemBack, green: listItemBack, blue: listItemBack))
                .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
            }

结果是：

在此处输入图像描述

为什么这个循环的视图有这个奇怪的空白。但是当我只将带有一些项目数据的文本放入这个循环时，这些空格就消失了。为什么会这样？也许我的填充物在某处重叠？我尝试使用此代码：

.listRowInsets(EdgeInsets())

但它根本没有帮助我。

标签： swiftswiftui

解决方案

它是你的填充Button物(.all,20)。

ForEach(listItems, id: \.self){ item in
                HStack{
                    Button(action: {
                        actionSheet()
                    }) {
                        HStack(spacing: 10) {
                            Image(item.img)
                            Text(item.title)
                                .modifier(TextHandler(fontSize: 16, rgbArray: [47,47,47]))
                                .padding(.leading,10)
                        }
                    }.padding(.all,20)                         
                    Spacer()
                }
                .background(Color(red: listItemBack, green: listItemBack, blue: listItemBack)). // This is causing the spacing. It needs to be moved to the parent view.

                .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
            }

如果您希望它们在没有空白的纯色背景中隔开，则背景需要在父视图上进行。当我将您的代码放入 aVStack并放入.background时，VStack我想出了这个： 具有纯灰色背景和按钮列表的 VStack

这是你想要的？

编辑：您一直将填充Button设置为 20。这将在创建的每个按钮周围留出空间。然后你把你.background放在每个HStack包含一个Button. 是在.padding按钮周围，但HStack只是 的高度，而Button不是Buttonand .padding。如果您注释掉.padding(.all,20)，您将看到视图折叠，直到Buttons它们彼此相邻。我相信你不希望那样。

通过将背景放在父视图上（在我的情况下，我将您的代码放入 aVStack中，所以.background就到了那里），您将一个背景放在所有按钮后面，而不是每个按钮一个背景有一个间隙。

第二次编辑：这是我最小的、可重现的示例代码。请注意，我无权访问您的listItemBack变量来设置背景颜色，所以我只使用了灰色。

import SwiftUI

struct SpaceView: View {
    
    @State var listItems: [ListItem] = [ListItem(title: "First", img: "internaldrive"),
                                        ListItem(title: "Second", img: "paperplane"),
                                        ListItem(title: "Third", img: "scribble"),
                                        ListItem(title: "Fourth", img: "tram.fill"),
                                        ListItem(title: "Fifth", img: "clock"),
                                        ListItem(title: "Sixth", img: "a.magnify"),
                                        ListItem(title: "Seventh", img: "arrowshape.zigzag.forward")
    ]
    
    var body: some View {
        VStack {
        ForEach(listItems){ item in
                        HStack{
                            Button(action: {
                                print("\(item.title) Pressed")
                            }) {
                                HStack(spacing: 10) {
                                    Image(systemName: item.img)
                                    Text(item.title)
//                                        .modifier(TextHandler(fontSize: 16, rgbArray: [47,47,47]))
                                        .padding(.leading,10)
                                }
                            }.padding(.all,20)
                            
                            Spacer()
                        }
//                        .background(Color(red: listItemBack, green: listItemBack, blue: listItemBack))
                          //.background(Color.gray) // Uncomment here and comment out the other background to see the difference.

                        .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
                    }
    }
        .background(Color.gray) // Comment out here to switch between your view an my view.
    }
}

struct ListItem: Identifiable, Hashable {
    var id = UUID()
    var title: String
    var img: String
}

struct SpaceView_Previews: PreviewProvider {
    static var previews: some View {
        SpaceView()
    }
}

推荐阅读