[英]SwiftUI - Animate View expansion (show / hide)
I have a View
that contains a HStack
and a DatePicker
.我有一个包含
HStack
和DatePicker
的View
。 When you tap on the HStack
, the DatePicker
is shown / hidden.当您点击
HStack
, DatePicker
将显示/隐藏。 I want to animate this action like the animation of Starts and Ends row in iOS Calendar's New Event View.我想为这个动作设置动画,就像 iOS 日历的新事件视图中开始和结束行的动画一样。
struct TimePicker: View {
@Binding var startTime: Date
@State private var isDatePickerVisible: Bool = false
var body: some View {
VStack(alignment: .center) {
HStack {
ListItemView(icon: "start-time",
leadingText: "Start Time",
trailingText: startTime.stringTime())
}
.onTapGesture {
withAnimation {
self.isDatePickerVisible.toggle()
}
}
Group {
if isDatePickerVisible {
DatePicker("", selection: $startTime, displayedComponents: [.hourAndMinute])
.datePickerStyle(WheelDatePickerStyle())
}
}
.background(Color.red)
.modifier(AnimatingCellHeight(height: isDatePickerVisible ? 300 : 0))
}
}
}
I have used the following code for animation.我已将以下代码用于动画。 It almost works.
它几乎有效。 The only problem is that
HStack
jumps.唯一的问题是
HStack
跳转。 And I can not fix it.我无法修复它。
https://stackoverflow.com/a/60873883/8292178 https://stackoverflow.com/a/60873883/8292178
struct AnimatingCellHeight: AnimatableModifier {
var height: CGFloat = 0
var animatableData: CGFloat {
get { height }
set { height = newValue }
}
func body(content: Content) -> some View {
content.frame(height: height)
}
}
How to fix this issue?如何解决这个问题? How to animate visibility of the
DatePicker
?如何为
DatePicker
可见性设置动画?
It's simple, you don't need extra ViewModifier
很简单,你不需要额外的
ViewModifier
struct TimePicker: View {
@Binding var startTime: Date
@State private var isDatePickerVisible: Bool = false
var body: some View {
VStack(alignment: .center) {
HStack {
ListItemView(icon: "start-time"
, leadingText: "Start Time"
, trailingText: startTime.stringTime())
}.onTapGesture {
isDatePickerVisible.toggle()
}
if isDatePickerVisible {
DatePicker(""
, selection: $model.startTime
, displayedComponents: [.hourAndMinute]
).datePickerStyle(WheelDatePickerStyle())
}
}.animation(.spring())
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.