ForEach和GeometryReader:可变高度的儿童? [英] ForEach and GeometryReader: variable height for children?
问题描述
我有以下示例:
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.
It's a list of cards which expand if the user taps on it. The problem here is the .frame(height: self.showDetails ? UIScreen.main.bounds.height : 80, alignment: .center) line. Depending on how much text a Card-Object has for its title or subtitle, the CardView has to be smaller or larger than 80. I need to calculate the height and use that instead of the fixed 80.
外观:
有什么想法可以为CardView子代使用高度可变的GeometryReader吗?
Any idea how I can use the GeometryReader with a variable height for the CardView children?
提前谢谢！
推荐答案
最终，我想重新创建应用商店的扩展卡视图:imgur.com/a/1Jd4bI5.我已经为此发布了另一个Stackoverflow问题:stackoverflow.com/questions/62331530/….除了拥有大小不同的卡以外，所有其他功能都可以正常工作.
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.
好吧，我使用了该帖子中的代码作为切入点(正如您所说的那样，除了不同的高度支撑之外，它可以满足您的需求)
Ok, I used code from that accepted post as entry point (as you said it satisfies you except different height support)
因此，这是一种使用视图首选项在代码中支持不同高度单元的解决方案.
So here is a solution to support different height cells in that code using view preferences.
使用Xcode 12b进行了测试(以防万一，我没有使用SwiftUI2功能).
Tested with Xcode 12b (however I did not use SwiftUI2 features, just in case).
仅更改的部分:
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()
}
}
这篇关于ForEach和GeometryReader:可变高度的儿童?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
