SwiftUI 用图像包装 HStack

Posted 2023-02-24

【中文标题】SwiftUI 用图像包装 HStack

【英文标题】：SwiftUI Wrapping HStack with Images

【发布时间】：2021-05-22 13:48:03

【问题描述】：

我正在尝试制作一个包含 x 个图像的 HStack，并将以包装 HStack 方式显示它们（即，如果 7 个图像中只有 4 个适合该行，则将剩余的 3 个溢出到下一行） .

我正在尝试使用库 WrappingHStack (https://github.com/dkk/WrappingHStack)，但结果与预期不符，图像未环绕。

这是我的代码：

    @State var numEarths : Int = 7;
    var body: some View 
        VStack
        
            Text("If everyone were to live like you, we would need \(numEarths) Earths").font(.title)
            WrappingHStack
                ForEach(0 ..< numEarths)_ in
                Image("logo")
                
                
             
         
    

这是模拟器上的结果（请参阅，没有包装）...我们应该看到 7 个地球徽标图像，但您只能看到 4 个（以及数字 5 的一小部分）。 screenshot of image

请有人帮我解决这个问题吗？我是 SwiftUI 开发人员的新手，所以如果这是一个愚蠢的错误，请轻视我。谢谢。

【问题讨论】：

这对***.com/a/58876712/12299030很有帮助。

如果你的目标是 ios 14+，我建议你看看 LazyVGrid 和 LazyHGrid。

【参考方案1】：

根据WrappingHStack库，如果你想实现你上面提到的，你需要做两件事：

给您的Image 一个frame，以便WrappingHStack 可以知道每行要放入多少元素。 将ForEach 循环更改为WrappingHStack，因为WrappingHStack 可以用作ForEach 来循环遍历项目。

WrappingHStack(0..<numEarths, id:\.self)  _ in
    Image("logo")
        .resizable()
        .frame(width: 100, height: 100)

【讨论】：

没错。第二个要点背后的原因是 ForEach 的处理方式就像一个不应包装在该库中的对象（作者在这里）