ForEach 和 GeometryReader : variable height for children?

Question

我有以下示例:

import SwiftUI

struct TestSO: View {

    @State var cards = [
        Card(title: "short title text", subtitle: "short title example"),
        Card(title: "medium title text text text text text", subtitle: "medium title example"),
        Card(title: "long title text text text text text text text text text text text text text text text text text",
         subtitle: "long title example"),
        Card(title: "medium title text text text text text", subtitle: "medium title example"),
        Card(title: "short title text", subtitle: "short title example"),
    ]

    @State var showDetails = false

    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    ForEach(cards.indices) { index in
                        GeometryReader { reader in
                            CardView(showDetails: self.$showDetails, card: self.cards[index])
                                .offset(y: self.showDetails ? -reader.frame(in: .global).minY : 0)
                                .onTapGesture {
                                    self.showDetails.toggle()
                                    self.cards[index].showDetails.toggle()
                            }
                        }.frame(height: self.showDetails ? UIScreen.main.bounds.height : 80, alignment: .center)
                    }
                }
            }.navigationBarTitle("Content", displayMode: .large)
        }
    }
}

struct CardView : View {

    @Binding var showDetails : Bool

    var card : Card

    var body: some View {
        VStack(alignment: .leading){
            HStack{
                Text(card.subtitle).padding([.horizontal, .top]).fixedSize(horizontal: false, vertical: true)
                Spacer()
            }
            Text(card.title).fontWeight(Font.Weight.bold).padding([.horizontal, .bottom]).fixedSize(horizontal: false, vertical: true)
            if(card.showDetails && showDetails) {
                Spacer()
            }
        }
        .background(Color.white)
        .cornerRadius(16)
        .shadow(radius: 12)
        .padding()
        .opacity(showDetails && card.showDetails ? 1 : (!showDetails ? 1 : 0))
    }
}

struct Card : Identifiable{
    var id = UUID()
    var title : String
    var subtitle : String
    var showDetails : Bool = false
}

这是一个卡片列表，如果用户点击它就会展开。这里的问题是 .frame(height: self.showDetails ? UIScreen.main.bounds.height : 80, alignment: .center)线。根据 Card-Object 的标题或副标题有多少文本，CardView 必须小于或大于 80。我需要计算高度并使用它而不是固定的 80。

它的外观:



知道如何为 CardView 子项使用具有可变高度的 GeometryReader 吗？

提前致谢!

Answer 1

Ultimately, I want to recreate the expanded card view of the app store: imgur.com/a/1Jd4bI5. I already posted an other Stackoverflow question for this: stackoverflow.com/questions/62331530/…. Everything works except having cards with differenz sizes.

好的，我使用该接受的帖子中的代码作为入口点(正如您所说，除了不同的高度支持外，它满足您的要求)
因此，这是使用 View 首选项支持该代码中不同高度单元格的解决方案。
使用 Xcode 12b 测试(不过我没有使用 SwiftUI2 功能，以防万一)。

仅更改部分:

struct ContentView: View {
    @State var selectedForDetail : Post?
    @State var showDetails: Bool = false

    // Posts need to be @State so changes can be observed
    @State var posts = [
        Post(subtitle: "test1", title: "title1", extra: "Lorem ipsum dolor..."),
        Post(subtitle: "test1", title: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor", extra: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor..."),
        Post(subtitle: "test1", title: "title1", extra: "Lorem ipsum dolor..."),
        Post(subtitle: "test1", title: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis", extra: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis..."),
        Post(subtitle: "test1", title: "title1", extra: "Lorem ipsum dolor...")
    ]

    @State private var heights = [Int: CGFloat]()   // store heights in one update
    var body: some View {
        ScrollView {
            VStack {
                ForEach(self.posts.indices) { index in
                    GeometryReader { reader in
                        PostView(post: self.$posts[index], isDetailed: self.$showDetails)
                            .fixedSize(horizontal: false, vertical: !self.posts[index].showDetails)
                            .background(GeometryReader {
                                Color.clear
                                    .preference(key: ViewHeightKey.self, value: $0.frame(in: .local).size.height)
                            })
                            .offset(y: self.posts[index].showDetails ? -reader.frame(in: .global).minY : 0)
                            .onTapGesture {
                                if !self.posts[index].showDetails {
                                    self.posts[index].showDetails.toggle()
                                    self.showDetails.toggle()
                                }
                            }
                            // Change this animation to what you please, or change the numbers around. It's just a preference.
                            .animation(.spring(response: 0.6, dampingFraction: 0.6, blendDuration: 0))
                            // If there is one view expanded then hide all other views that are not
                            .opacity(self.showDetails ? (self.posts[index].showDetails ? 1 : 0) : 1)
                    }
                    .frame(height: self.posts[index].showDetails ? UIScreen.main.bounds.height : self.heights[index], alignment: .center)
                    .onPreferenceChange(ViewHeightKey.self) { value in
                        self.heights[index] = value
                    }
                    .simultaneousGesture(
                        // 500 will disable ScrollView effect
                        DragGesture(minimumDistance: self.posts[index].showDetails ? 0 : 500)
                    )
                }
            }
        }
    }
}

struct ViewHeightKey: PreferenceKey {
    typealias Value = CGFloat
    static var defaultValue = CGFloat.zero
    static func reduce(value: inout Value, nextValue: () -> Value) {
        value += nextValue()
    }
}