如何居中水平图像列表SwiftUI答案

【问题标题】：How to centering horizontal Image list SwiftUI如何居中水平图像列表SwiftUI
【发布时间】：2021-05-27 21:49:07
【问题描述】：

如果我的后端服务器向我发送的图像图标少于 7 个，我想将我的水平社交媒体图像列表居中。如果我收到 7 个社交媒体图标，它看起来不错，但如果我收到 2、3 或 5 个图标，我想显示它们始终处于中心位置。我的意思是；

在第二张图片中，您可以看到它们看起来是分开的，但我想将它们显示在中心位置，就像在一起一样。我该怎么做？

这是我的代码；

 HStack(alignment:.center,spacing : 0) {
            
            ForEach(data.options ?? [] , id:\.id) { item in
                
                    if item.icon != nil {
                        
                        Image(uiImage:(item.icon ?? "").load())
                            .resizable()
                        
                    } else {
                        
                        GeometryReader { geometry in
                                     Image(item.type ?? "")
                                        .resizable()
                                        .frame(width:UIScreen.main.bounds.width * 0.065,alignment:.center)
                                        .frame(width:geometry.size.width / 1,height:25,alignment:.center)
                                }
                                
                            
                        }.padding(EdgeInsets(top: 0, leading: 0, bottom: UIScreen.main.bounds.height * 0.050, trailing: 0))
                        
                    }
                
            }

【问题讨论】：

标签： swift swiftui

【解决方案1】：

我无法重播您的数据项，您没有共享该结构，但它以这种方式工作：

struct Icon: Identifiable, Hashable {
    var name: String
    var icon: Image? {return Image(name)}
    public var id:String {return self.name}
}

struct ContentView: View {
    
    @State var icons: [Icon] = [Icon(name:"1")]
    @State var prog = 1
    var body: some View {
        
        VStack {
            Button(action: {
                prog += 1
                icons.append(Icon(name:String(prog)))
            }, label: {
                Text("Add")
            })
            Button(action: {
                prog -= 1
                icons.removeLast()
            }, label: {
                Text("Remove")
            })
            HStack(alignment:.center,spacing : 0) {

                ForEach(icons, id:\.self) { item in

                    if item.icon == nil {

                        EmptyView()

                    }
                    else {
                        
                        item.icon!
                            .resizable()
                            .frame(width:UIScreen.main.bounds.width * 0.085,height:UIScreen.main.bounds.width * 0.085,alignment:.center)
                            .padding(6)
                    }
                }
            }
        }
    }
}

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

【讨论】：

【解决方案2】：

您是否尝试过在每一侧添加一个 Spacer()？在 ForEach 语句之前添加一个，在 ForEach 语句之后添加另一个。我认为这会使它们更靠近。

所以：

HStack {
    Spacer()

    ForEach {
       Code
    }

    Spacer()
}

【讨论】：

没用。实际上它显示在一起，但所有宽度的 2 个图标，因为这些图标看起来很大。
您可以调整图标大小，但没有其他修饰符。如果您添加限制其大小的内容（例如 .frame(height:50)，这可能会有所帮助。