ios - SwiftUI - 动画视图扩展(显示/隐藏)
问题描述
我有一个View
包含 aHStack
和 a 的 a DatePicker
。当您点击 时HStack
,DatePicker
会显示/隐藏。我想为这个动作设置动画,就像 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))
}
}
}
我已将以下代码用于动画。它几乎可以工作。唯一的问题是HStack
跳跃。我无法修复它。
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)
}
}
如何解决这个问题?如何为 的可见性设置动画DatePicker
?
解决方案
很简单,不需要额外的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())
}
}
推荐阅读
- python - 在两个空格之间添加字符
- html - 如何使用 CSS 更改文本?
- node.js - 如何为不同的客户部署同一个 node.js express API 的多个实例
- java - 每次创建新客户对象时创建唯一的客户 ID。这可能吗?爪哇
- node.js - 如何检查来自池的连接是否空闲(不忙)以供使用?(带有mariadb的nodejs)
- git - 推送新的本地标签时出现 GitPython 问题
- sonarqube - 将 SonarQube 与 Bitbucket 存储库连接起来
- codeigniter-3 - 为什么 isset 在 CodeIgniter 中取消表单验证?
- android - 条件下的 SQLite 问题
- c# - 在 Unity 中为纹理上的点创建调色板