SwiftUI共20篇
布局(六) - Layout 协议-Stewed Noodles 资源

布局(六) – Layout 协议

Layout 协议,可以创建⾃定义的容器视图,让它们根据所编写的算法来布局⼦视图。这个协议的使用分为两步:⾸先,使⽤ sizeThatFits ⽅法确定容器的尺⼨。在该⽅法内部,我们通过⼦视图的代理,来...
jiulinxiri的头像-Stewed Noodles 资源烩之面大会员jiulinxiri10个月前
02314
环境(一) - 从环境中读取-Stewed Noodles 资源

环境(一) – 从环境中读取

环境 (environment) 本质上,它是⼀种内置的依赖注⼊ (dependency injection) 技术。 下⾯这个例⼦中,当我们在 VStack 上设置字体时,它会传播到两个 Text 视图中去,并改变它们的外观: Font ...
jiulinxiri的头像-Stewed Noodles 资源烩之面大会员jiulinxiri1年前
04714
环境(二) - 自定义环境键-Stewed Noodles 资源

环境(二) – 自定义环境键

环境键的自定义需要两个必要步骤和一个可选步骤: 实现⼀个⾃定义的 EnvironmentKey。 在 EnvironmentValues 上添加扩展,并提供⼀个属性,让我们能在环境中获取和设置该值。 (可选) 在 View 上...
jiulinxiri的头像-Stewed Noodles 资源烩之面大会员jiulinxiri1年前
02714
环境(三) - 自定义组件样式-Stewed Noodles 资源

环境(三) – 自定义组件样式

本文以 badge 为例,实现自定义组件样式的具体步骤: 创建一个 BadgeStyle 协议为角标样式定义接口。 为角标样式创建一个环境变键。 在 badge 修饰符中使用这个自定义角标样式。 ⻆标样式的协议...
jiulinxiri的头像-Stewed Noodles 资源烩之面大会员jiulinxiri1年前
04214
自定义时序曲线-Stewed Noodles 资源

自定义时序曲线

SwiftUI 可以精细控制动画的运动方式,完全自定义贝塞尔路径,匹配我们想要的加速度或者减速度。 比如,我们创建一条时序曲线,在动画中心部分非常缓慢,但在边缘部分剧烈跳动。 extension Anim...
jiulinxiri的头像-Stewed Noodles 资源烩之面大会员jiulinxiri1年前
03412
高级过渡-Stewed Noodles 资源

高级过渡

SwiftUI 的过渡系统允许我们自定义插入或移除视图的方式,可以在要过渡的视图周围插入一系列新视图、创建本地状态、添加复杂的动画等等。 本文创建的效果,如下所示 Twitter 点赞效果 添加新的...
jiulinxiri的头像-Stewed Noodles 资源烩之面大会员jiulinxiri1年前
04212
布局(八) - 坐标空间-Stewed Noodles 资源

布局(八) – 坐标空间

Framework 为我们提供两种内置的坐标空间: 全局坐标空间 和 本地坐标空间,我们也可以定义⾃⼰的坐标空间。struct ContentView: View { var body: some View { VStack { Text('Hello') Text('Se...
jiulinxiri的头像-Stewed Noodles 资源烩之面大会员jiulinxiri10个月前
03511
动画(一) - 属性动画-Stewed Noodles 资源

动画(一) – 属性动画

在 SwiftUI 中,修改状态是唯⼀能触发视图更新的⼿段。默认情况下,旧视图树与新视图树之间的更改不会进⾏动画处理。 对那些在视图树中已经存在,且在状态变化前后属性也相应改变的视图,属性动...
jiulinxiri的头像-Stewed Noodles 资源烩之面大会员jiulinxiri10个月前
02311
动画(三) - 动画协议-Stewed Noodles 资源

动画(三) – 动画协议

SwiftUI 属性动画系统的核⼼是 Animatable 协议。这个协议可以被视图和视图修饰符所实现,它们通过该协议把可以进⾏动画的属性暴露给SwiftUI。 这个协议唯⼀的要求是⼀个 animatableData 属性,...
jiulinxiri的头像-Stewed Noodles 资源烩之面大会员jiulinxiri10个月前
02611
布局(四) - 容器视图-Stewed Noodles 资源

布局(四) – 容器视图

HStack 和 VStack⽔平和竖直堆栈在布局⼦视图时采⽤的⽅法相同,只是对应的轴不⼀样。以 HStack 为例。HStack(spacing: 0) { Color.cyan Text('Hello, World!') Color.teal } 如果我们提供⼀个...
jiulinxiri的头像-Stewed Noodles 资源烩之面大会员jiulinxiri10个月前
06010