web-dev-qa-db-ja.com

SwiftUI HStack with Wrap

青いタグ（現在は切り捨てられています）が完全に表示され、自動的に改行される可能性はありますか？

NavigationLink(destination: GameListView()) {
                            VStack(alignment: .leading, spacing: 5){
                                // Name der Sammlung:
                                Text(collection.name)
                                    .font(.headline)
                                // Optional: Für welche Konsolen bzw. Plattformen:
                                HStack(alignment: .top, spacing: 10){
                                    ForEach(collection.platforms, id: \.self) { platform in
                                        Text(platform)
                                            .padding(.all, 5)
                                            .font(.caption)
                                            .background(Color.blue)
                                            .foregroundColor(Color.white)
                                            .cornerRadius(5)
                                            .lineLimit(1)
                                    }
                                }
                            }
                            .padding(.vertical, 10)
                        }

enter image description here

また、青いタグに改行があってはなりません：

enter image description here

これが最終的には次のようになります。 enter image description here

swifttagsswiftuihstack
6
Flolle

私はこのコードのようなものを持っています（かなり長い）。単純なシナリオでは問題なく動作しますが、ジオメトリリーダーとの深いネストでは、サイズが適切に伝播されません。

このビューが親ビューのコンテンツを拡張するText（）のようにラップおよびフローするのはいいことですが、親ビューからの高さを明示的に設定しているようです。

https://Gist.github.com/michzio/a0b23ee43a88cbc95f65277070167e29

ここにコードの最も重要な部分があります（プレビューおよびテストデータなし）

[![private func flow(in geometry: GeometryProxy) -> some View {

        print("Card geometry: \(geometry.size.width) \(geometry.size.height)")

        return ZStack(alignment: .topLeading) {
            //Color.clear
            ForEach(data, id: self.dataId) { element in
                self.content(element)
                    .geometryPreference(tag: element\[keyPath: self.dataId\])
                    /*
                    .alignmentGuide(.leading) { d in
                        print("Element: w: \(d.width), h: \(d.height)")
                        if (abs(width - d.width) > geometry.size.width)
                        {
                            width = 0
                            height -= d.height
                        }

                        let result = width

                        if element\[keyPath: self.dataId\] == self.data.last!\[keyPath: self.dataId\] {
                            width = 0 //last item
                        } else {
                            width -= d.width
                        }
                        return result
                    }
                    .alignmentGuide(.top) { d in
                        let result = height
                        if element\[keyPath: self.dataId\] == self.data.last!\[keyPath: self.dataId\] {
                            height = 0 // last item
                        }
                        return result
                    }*/

                    .alignmentGuide(.top) { d in
                        self.alignmentGuides\[element\[keyPath: self.dataId\]\]?.y ?? 0
                    }
                    .alignmentGuide(.leading) { d in
                        self.alignmentGuides\[element\[keyPath: self.dataId\]\]?.x ?? 0
                    }
            }
        }
        .background(Color.pink)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        //.animation(self.loaded ? .linear(duration: 1) : nil)

        .onPreferenceChange(_GeometryPreferenceKey.self, perform: { preferences in

                DispatchQueue.main.async {
                    let (alignmentGuides, totalHeight) = self.calculateAlignmentGuides(preferences: preferences, geometry: geometry)
                    self.alignmentGuides = alignmentGuides
                    self.totalHeight = totalHeight
                    self.availableWidth = geometry.size.width
                }
        })
    }

    func calculateAlignmentGuides(preferences: \[_GeometryPreference\], geometry: GeometryProxy) -> (\[AnyHashable: CGPoint\], CGFloat) {

        var alignmentGuides = \[AnyHashable: CGPoint\]()

        var width: CGFloat = 0
        var height: CGFloat = 0

        var rowHeights: Set<CGFloat> = \[\]

        preferences.forEach { preference in
            let elementWidth = spacing + preference.rect.width

            if width + elementWidth >= geometry.size.width {
                width = 0
                height += (rowHeights.max() ?? 0) + spacing
                //rowHeights.removeAll()
            }

            let offset = CGPoint(x: 0 - width, y: 0 - height)

            print("Alignment guides offset: \(offset)")
            alignmentGuides\[preference.tag\] = offset

            width += elementWidth
            rowHeights.insert(preference.rect.height)
        }

        return (alignmentGuides, height + (rowHeights.max() ?? 0))
    }
}][1]][1]
0
Michał Ziobro