排序
布局(八) – 坐标空间
Framework 为我们提供两种内置的坐标空间: 全局坐标空间 和 本地坐标空间,我们也可以定义⾃⼰的坐标空间。struct ContentView: View { var body: some View { VStack { Text('Hello') Text('Se...
布局(五) – 对齐
默认情况下,⼏乎所有的视图都会把⼦视图居中对⻬。Text('Hello') .frame(width: 100, height: 100) frame 修饰器拥有⼀个默认值为 .center 的 alignment 参数。这 100⨉100 的区域中,⽂本将被...
布局(三) – 视图修饰符
视图修饰符总是把已经存在的视图包装到另⼀层中去:修饰符会变为它所作⽤的视图的⽗视图。Padding.padding 修饰符使⽤它收到的内边距值来修改建议尺⼨,它会从建议尺⼨的对应边上减去这个边距值...
布局(二) – 叶子视图
叶子视图 这里是指没有子视图的视图。Text默认情况下,Text 视图会去适应任意的建议尺⼨,设法让⾃⼰适配 (不超过) 这个尺⼨。Text 使用的策略顺序如下:将⽂本分成多⾏ (英⽂内容按单词换⾏)单...
布局(一) – 布局算法
布局的具体算法描述如下:父视图向子视图提供一个建议尺寸。⼦视图基于这个建议尺⼨决定⾃⼰的尺⼨,如果这个⼦视图还有⾃⼰的⼦视图,从步骤 1 开始递归。⼦视图将它的尺⼨报告给⽗视图。⽗视图...
高级过渡
SwiftUI 的过渡系统允许我们自定义插入或移除视图的方式,可以在要过渡的视图周围插入一系列新视图、创建本地状态、添加复杂的动画等等。 本文创建的效果,如下所示 Twitter 点赞效果 添加新的...
环境(三) – 自定义组件样式
本文以 badge 为例,实现自定义组件样式的具体步骤: 创建一个 BadgeStyle 协议为角标样式定义接口。 为角标样式创建一个环境变键。 在 badge 修饰符中使用这个自定义角标样式。 ⻆标样式的协议...
环境(二) – 自定义环境键
环境键的自定义需要两个必要步骤和一个可选步骤: 实现⼀个⾃定义的 EnvironmentKey。 在 EnvironmentValues 上添加扩展,并提供⼀个属性,让我们能在环境中获取和设置该值。 (可选) 在 View 上...
环境(一) – 从环境中读取
环境 (environment) 本质上,它是⼀种内置的依赖注⼊ (dependency injection) 技术。 下⾯这个例⼦中,当我们在 VStack 上设置字体时,它会传播到两个 Text 视图中去,并改变它们的外观: Font ...
自定义时序曲线
SwiftUI 可以精细控制动画的运动方式,完全自定义贝塞尔路径,匹配我们想要的加速度或者减速度。 比如,我们创建一条时序曲线,在动画中心部分非常缓慢,但在边缘部分剧烈跳动。 extension Anim...