那些遇到过的问题

具有环绕和动态高度的 SwiftUI HStack

Lua*_*lan 21 xcode word-wrap swift swiftui zstack

我有这个视图可以在多行上显示文本标签，这些标签是我从SwiftUI HStack with Wrap 获得的，但是当我将它添加到 VStack 中时，标签会与我放在下面的任何其他视图重叠。标签显示正确，但视图本身的高度不在 VStack 内计算。如何使此视图使用内容的高度？

import SwiftUI

struct TestWrappedLayout: View {
    @State var platforms = ["Ninetendo", "XBox", "PlayStation", "PlayStation 2", "PlayStation 3", "PlayStation 4"]

    var body: some View {
        GeometryReader { geometry in
            self.generateContent(in: geometry)
        }
    }

    private func generateContent(in g: GeometryProxy) -> some View {
        var width = CGFloat.zero
        var height = CGFloat.zero

        return ZStack(alignment: .topLeading) {
            ForEach(self.platforms, id: \.self) { platform in
                self.item(for: platform)
                    .padding([.horizontal, .vertical], 4)
                    .alignmentGuide(.leading, computeValue: { d in
                        if (abs(width - d.width) > g.size.width)
                        {
                            width = 0
                            height -= d.height
                        }
                        let result = width
                        if platform == self.platforms.last! {
                            width = 0 //last item
                        } else {
                            width -= d.width
                        }
                        return result
                    })
                    .alignmentGuide(.top, computeValue: {d in
                        let result = height
                        if platform == self.platforms.last! {
                            height = 0 // last item
                        }
                        return result
                    })
            }
        }
    }

    func item(for text: String) -> some View {
        Text(text)
            .padding(.all, 5)
            .font(.body)
            .background(Color.blue)
            .foregroundColor(Color.white)
            .cornerRadius(5)
    }
}

struct TestWrappedLayout_Previews: PreviewProvider {
    static var previews: some View {
        TestWrappedLayout()
    }
}
Run Code Online (Sandbox Code Playgroud)

示例代码：

struct ExampleTagsView: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                Text("Platforms:")
                TestWrappedLayout()

                Text("Other Platforms:")
                TestWrappedLayout()
            }
        }
    }
}

struct ExampleTagsView_Previews: PreviewProvider {
    static var previews: some View {
        ExampleTagsView()
    }
}
Run Code Online (Sandbox Code Playgroud)

结果： 在此处输入图片说明

Asp*_*eri 48

好的，这里有一个更通用和改进的变体（对于最初在SwiftUI HStack with Wrap 中引入的解决方案）

使用 Xcode 11.4 / iOS 13.4 测试

注意：由于视图高度是动态计算的，因此结果在运行时有效，而不是在预览中

在此处输入图片说明

struct TagCloudView: View {
    var tags: [String]

    @State private var totalHeight 
          = CGFloat.zero       // << variant for ScrollView/List
    //    = CGFloat.infinity   // << variant for VStack

    var body: some View {
        VStack {
            GeometryReader { geometry in
                self.generateContent(in: geometry)
            }
        }
        .frame(height: totalHeight)// << variant for ScrollView/List
        //.frame(maxHeight: totalHeight) // << variant for VStack
    }

    private func generateContent(in g: GeometryProxy) -> some View {
        var width = CGFloat.zero
        var height = CGFloat.zero

        return ZStack(alignment: .topLeading) {
            ForEach(self.tags, id: \.self) { tag in
                self.item(for: tag)
                    .padding([.horizontal, .vertical], 4)
                    .alignmentGuide(.leading, computeValue: { d in
                        if (abs(width - d.width) > g.size.width)
                        {
                            width = 0
                            height -= d.height
                        }
                        let result = width
                        if tag == self.tags.last! {
                            width = 0 //last item
                        } else {
                            width -= d.width
                        }
                        return result
                    })
                    .alignmentGuide(.top, computeValue: {d in
                        let result = height
                        if tag == self.tags.last! {
                            height = 0 // last item
                        }
                        return result
                    })
            }
        }.background(viewHeightReader($totalHeight))
    }

    private func item(for text: String) -> some View {
        Text(text)
            .padding(.all, 5)
            .font(.body)
            .background(Color.blue)
            .foregroundColor(Color.white)
            .cornerRadius(5)
    }

    private func viewHeightReader(_ binding: Binding<CGFloat>) -> some View {
        return GeometryReader { geometry -> Color in
            let rect = geometry.frame(in: .local)
            DispatchQueue.main.async {
                binding.wrappedValue = rect.size.height
            }
            return .clear
        }
    }
}

struct TestTagCloudView : View {
    var body: some View {
        VStack {
            Text("Header").font(.largeTitle)
            TagCloudView(tags: ["Ninetendo", "XBox", "PlayStation", "PlayStation 2", "PlayStation 3", "PlayStation 4"])
            Text("Some other text")
            Divider()
            Text("Some other cloud")
            TagCloudView(tags: ["Apple", "Google", "Amazon", "Microsoft", "Oracle", "Facebook"])
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

  • @Ludyem，已更新。不管怎样，很高兴你找到了自己的适应方式——我总是对此感到高兴。 (2认同)
  • @LualdiDylan 你好，我怎样才能使这个芯片居中对齐而不是左对齐？ (2认同)

Lua*_*lan 7

我只是通过将 GeometryReader 移动到 ExampleTagsView 并在 .alignmentGuide 中使用 platform.first 而不是 last 来解决这个问题

完整代码：

import SwiftUI

struct ExampleTagsView: View {
    var body: some View {
        GeometryReader { geometry in
            ScrollView(.vertical) {
                VStack(alignment: .leading) {
                    Text("Platforms:")
                    TestWrappedLayout(geometry: geometry)

                    Text("Other Platforms:")
                    TestWrappedLayout(geometry: geometry)
                }
            }
        }
    }
}

struct ExampleTagsView_Previews: PreviewProvider {
    static var previews: some View {
        ExampleTagsView()
    }
}

struct TestWrappedLayout: View {
    @State var platforms = ["Ninetendo", "XBox", "PlayStation", "PlayStation 2", "PlayStation 3", "PlayStation 4", "PlayStation 5", "Ni", "Xct5Box", "PlayStatavtion", "PlvayStation 2", "PlayStatiadfon 3", "PlaySdatation 4", "PlaySdtation 5"]
    let geometry: GeometryProxy

    var body: some View {
        self.generateContent(in: geometry)
    }

    private func generateContent(in g: GeometryProxy) -> some View {
        var width = CGFloat.zero
        var height = CGFloat.zero

        return ZStack(alignment: .topLeading) {
            ForEach(self.platforms, id: \.self) { platform in
                self.item(for: platform)
                    .padding([.horizontal, .vertical], 4)
                    .alignmentGuide(.leading, computeValue: { d in
                        if (abs(width - d.width) > g.size.width)
                        {
                            width = 0
                            height -= d.height
                        }
                        let result = width
                        if platform == self.platforms.first! {
                            width = 0 //last item
                        } else {
                            width -= d.width
                        }
                        return result
                    })
                    .alignmentGuide(.top, computeValue: {d in
                        let result = height
                        if platform == self.platforms.first! {
                            height = 0 // last item
                        }
                        return result
                    })
            }
        }
    }

    func item(for text: String) -> some View {
        Text(text)
            .padding(.all, 5)
            .font(.body)
            .background(Color.blue)
            .foregroundColor(Color.white)
            .cornerRadius(5)
    }
}
Run Code Online (Sandbox Code Playgroud)

结果： 在此处输入图片说明

Ale*_*dre 7

我以可以在不同的包中使用的方式改编了 robhasacamera 的解决方案（之前从 Asperi 进行了改编）。例如，我有一个仅用于帮助程序和视图扩展的包。

import SwiftUI

public struct WrappedHStack<Data, V>: View where Data: RandomAccessCollection, V: View {
    
    // MARK: - Properties
    public typealias ViewGenerator = (Data.Element) -> V
    
    private var models: Data
    private var horizontalSpacing: CGFloat
    private var verticalSpacing: CGFloat
    private var variant: WrappedHStackVariant
    private var viewGenerator: ViewGenerator
    
    @State private var totalHeight: CGFloat
    
    public init(_ models: Data, horizontalSpacing: CGFloat = 4, verticalSpacing: CGFloat = 4,
                variant: WrappedHStackVariant = .lists, @ViewBuilder viewGenerator: @escaping ViewGenerator) {
        self.models = models
        self.horizontalSpacing = horizontalSpacing
        self.verticalSpacing = verticalSpacing
        self.variant = variant
        _totalHeight = variant == .lists ? State<CGFloat>(initialValue: CGFloat.zero) : State<CGFloat>(initialValue: CGFloat.infinity)
        self.viewGenerator = viewGenerator
    }
    
    // MARK: - Views
    public var body: some View {
        VStack {
            GeometryReader { geometry in
                self.generateContent(in: geometry)
            }
        }.modifier(FrameViewModifier(variant: self.variant, totalHeight: $totalHeight))
    }
    
    private func generateContent(in geometry: GeometryProxy) -> some View {
        var width = CGFloat.zero
        var height = CGFloat.zero
        
        return ZStack(alignment: .topLeading) {
            ForEach(0..<self.models.count, id: \.self) { index in
                let idx = self.models.index(self.models.startIndex, offsetBy: index)
                viewGenerator(self.models[idx])
                    .padding(.horizontal, horizontalSpacing)
                    .padding(.vertical, verticalSpacing)
                    .alignmentGuide(.leading, computeValue: { dimension in
                        if abs(width - dimension.width) > geometry.size.width {
                            width = 0
                            height -= dimension.height
                        }
                        let result = width
                        
                        if index == (self.models.count - 1) {
                            width = 0 // last item
                        } else {
                            width -= dimension.width
                        }
                        return result
                    })
                    .alignmentGuide(.top, computeValue: {_ in
                        let result = height
                        if index == (self.models.count - 1) {
                            height = 0 // last item
                        }
                        return result
                    })
            }
        }.background(viewHeightReader($totalHeight))
    }
}

public func viewHeightReader(_ binding: Binding<CGFloat>) -> some View {
    return GeometryReader { geometry -> Color in
        let rect = geometry.frame(in: .local)
        DispatchQueue.main.async {
            binding.wrappedValue = rect.size.height
        }
        return .clear
    }
}

public enum WrappedHStackVariant {
    case lists // ScrollView/List/LazyVStack
    case stacks // VStack/ZStack
}

internal struct FrameViewModifier: ViewModifier {
    
    var variant: WrappedHStackVariant
    @Binding var totalHeight: CGFloat
    
    func body(content: Content) -> some View {
        if variant == .lists {
            content
                .frame(height: totalHeight)
        } else {
            content
                .frame(maxHeight: totalHeight)
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

另外，在 viewGenerator 之前添加 @ViewBuilder 注释，允许我们像这样使用它：

 var body: some View {
    WrappedHStack(self.models, id: \.self) { model in
      YourViewHere(model: model)
    }
 }
Run Code Online (Sandbox Code Playgroud)

rob*_*era 6

我调整了 Asperi 的解决方案以接受任何类型的视图和模型。以为我会在这里分享。我将它添加到GitHub Gist并在此处包含代码。

struct WrappingHStack<Model, V>: View where Model: Hashable, V: View {
    typealias ViewGenerator = (Model) -> V
    
    var models: [Model]
    var viewGenerator: ViewGenerator
    var horizontalSpacing: CGFloat = 2
    var verticalSpacing: CGFloat = 0

    @State private var totalHeight
          = CGFloat.zero       // << variant for ScrollView/List
    //    = CGFloat.infinity   // << variant for VStack

    var body: some View {
        VStack {
            GeometryReader { geometry in
                self.generateContent(in: geometry)
            }
        }
        .frame(height: totalHeight)// << variant for ScrollView/List
        //.frame(maxHeight: totalHeight) // << variant for VStack
    }

    private func generateContent(in geometry: GeometryProxy) -> some View {
        var width = CGFloat.zero
        var height = CGFloat.zero

        return ZStack(alignment: .topLeading) {
            ForEach(self.models, id: \.self) { models in
                viewGenerator(models)
                    .padding(.horizontal, horizontalSpacing)
                    .padding(.vertical, verticalSpacing)
                    .alignmentGuide(.leading, computeValue: { dimension in
                        if (abs(width - dimension.width) > geometry.size.width)
                        {
                            width = 0
                            height -= dimension.height
                        }
                        let result = width
                        if models == self.models.last! {
                            width = 0 //last item
                        } else {
                            width -= dimension.width
                        }
                        return result
                    })
                    .alignmentGuide(.top, computeValue: {dimension in
                        let result = height
                        if models == self.models.last! {
                            height = 0 // last item
                        }
                        return result
                    })
            }
        }.background(viewHeightReader($totalHeight))
    }

    private func viewHeightReader(_ binding: Binding<CGFloat>) -> some View {
        return GeometryReader { geometry -> Color in
            let rect = geometry.frame(in: .local)
            DispatchQueue.main.async {
                binding.wrappedValue = rect.size.height
            }
            return .clear
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

  • 谢谢您，您的更改使解决方案更容易推理和重用。 (2认同)
  • 与此中心对齐怎么样？ (2认同)

归档时间：

查看次数：

10249 次

最近记录：

4 年，5 月 前
带 Wrap 的 SwiftUI HStack 36
更多相关链接
相关归档
模块'myFramework'的标题包不包含标题'otherFramework.h' 48
iOS 9:警告"必须支持所有界面方向,除非应用程序需要全屏"才能使用通用应用程序 44
UICollectionView在IB中不包含UICollectionViewCell 21
XCode 13.1：未定义的符号：__swift_FORCE_LOAD_$_XCTestSwiftSupport 20
'className'的NSManagedObject必须具有有效的NSEntityDescription.错误 18
在Swift中以编程方式进行Segue 17
在XCode中将构建设置重置为默认值？ 16
Swift闭包[弱自我]和异步任务 11
无法从其模块界面构建模块；它可能已损坏，或者可能在生成时触发了 Swift 编译器中的错误 9
如何象征框架中发生的崩溃？ 8
难疑归档
如何使用JavaScript漂亮地打印JSON？ 2222
使用jQuery获取当前URL？ 1761
Facebook如何禁用浏览器的集成开发人员工具？ 1652
命令折叠代码的所有部分？ 1576
从Git提交中删除文件 1484
每个'循环的Java'如何工作？ 1446
MVC和MVVM有什么区别？ 1275
在HTML中显示哪些字符可用于上/下三角(没有词干的箭头)？ 1212
我怎样才能用Python代表'Enum'？ 1146
在jQuery中删除事件处理程序的最佳方法？ 1038