17、SwiftUI开发：从基础到实战

SwiftUI开发：从基础到实战

1. 执行定时器应用开发

在开发执行定时器应用时，我们需要完成多个关键步骤。首先是编码灰色圆圈和主圆圈，主圆圈相对复杂，它需要根据剩余时间收缩圆环，并在收缩过程中实现良好的动画效果。接着是编码时间和按钮，这些元素不像之前绘制的两个圆圈那样使用形状显示，而是使用之前创建待办事项列表时用过的元素。

为了创建所需的视图，我们要将灰色圆圈、主圆圈、时间和按钮这三个元素按顺序组合在 ZStack 中。 ZStack 与 HStack 或 VStack 类似，但它是在Z轴（即深度方向）上排列元素。在执行定时器应用中，我们使用 VStack 将灰色圆圈置于最底层，主圆圈放在其上，这样主圆圈收缩时灰色圆圈会显现出来，时间和按钮则放在最顶层。

最后，我们要给视图添加 onReceive 事件动作，使视图能够响应之前创建的定时器，并根据定时器信息更新UI。以下是相关代码示例：

import SwiftUI 

struct ContentView: View { 
    // 假设这里有定时器和倒计时时间的相关定义
    var body: some View { 
        VStack { 
            // 灰色圆圈
            // 主圆圈
            // 时间和按钮
        }
        .onReceive(timer) { _ in