如何居中水平图像列表SwiftUI

Posted 2023-02-15

【中文标题】如何居中水平图像列表SwiftUI

【英文标题】：How to centering horizontal Image list 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))
                        
                    
                
            

【参考方案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)，这可能会有所帮助。