SwiftUI:如何将HStack中的视图移动到屏幕中央?

时间:2020-09-19 13:30:58

标签: swiftui geometryreader hstack

我正在尝试制作一个每周日历,其中将一天的点击移动到屏幕的中央并展开以显示有关其自身的信息。目前,他们只是通过越来越多的空间而不是居中移动。子视图使用GeometryReader来确定要去的位置,具体取决于它所处的空间。我尝试使用偏移量,但是这样做使我无法再次点击以取消选择它。

使用局部框架使其保持一致是可以的,但是全局空间是问题所在(y为简化起见,目前仅对其进行硬编码)

.position(x: self.day == self.selected
            ? geometry.frame(in: .global).midX
            : geometry.frame(in: .local).midX,
          y: self.day == self.selected ? 200 : 275)

这是该代码的精简版本

enum DayOfTheWeek: CaseIterable {
    case mon, tue, wed, thu, fri, sat, sun
}

struct ContentView: View {
    @State var selectedDay: DayOfTheWeek?
    
    var body: some View {
        HStack {
            ForEach(DayOfTheWeek.allCases, id: \.self) { day in
                
                GraphSubview(day: day, selected: self.$selectedDay)
            }
        }
    }
}



struct GraphSubview: View {
    
    var day: DayOfTheWeek
    @Binding var selected: DayOfTheWeek?
    
    var body: some View {
        GeometryReader { geometry in
            
            Circle()
                .frame(width: geometry.frame(in: .local).width)
                
                .animation(.easeOut(duration: 0.2))
                
                //The issue
                .position(x: self.day == self.selected
                            ? geometry.frame(in: .global).midX
                            : geometry.frame(in: .local).midX,
                          y: self.day == self.selected ? 200 : 275)
                
                .gesture(TapGesture()
                    .onEnded {
                        if (self.day == self.selected) {
                            self.selected = nil
                        }
                        else {
                            self.selected = self.day
                        }
                    }
                )
        }
    }
}

0 个答案:

没有答案