SwiftUI 简单时间线视图开发教程

SwiftUI 简单时间线视图开发教程

本教程详细介绍了如何实现一个 时间线视图，并逐步分析代码的设计思路。我们会特别分析时间线中连接线的实现，探讨其连续性如何保持以及偏移量计算的原因。

简单时间线视图

---

1. 整体视图结构

TimeLineView 是整个时间线组件的入口，包含以下几个主要部分：

• TimeLineView：主视图，包含时间线的滚动视图。
• GeneraTimeLineView：时间线的核心视图，负责展示所有条目。
• timeLineSubView：时间线的单条子视图，包含左侧圆点、右侧时间和详细信息。
• GeneraTimeLineViewItemModel：用于描述每个时间线条目的数据模型。

---

代码预览

struct TimeLineView: View {
   
    @State private var values: [GeneraTimeLineViewItemModel] = [] // 时间线条目数据

    var body: some View {
   
        ScrollView(.vertical, showsIndicators: false) {
    // 垂直滚动视图
            getTimeLineView()
                .padding()
        }
        .navigationTitle("时间线")
        .onAppear {
   
            getValues() // 初始化数据
        }
    }
}

功能分析

1. 数据初始化：
   在 onAppear 生命周期方法中调用 getValues()，动态加载时间线条目数据。

2. 滚动视图：
   使用 ScrollView 创建垂直滚动视图，保证条目数量较多时用户可以上下滑动查看。

3. 时间线核心视图调用：
   getTimeLineView() 方法返回时间线核心视图。

---

2. 数据模型

每个时间线条目都由 GeneraTimeLineViewItemModel 描述：

class GeneraTimeLineViewItemModel: Identifiable, Equatable {
   
    static func == (lhs: GeneraTimeLineViewItemModel, rhs: GeneraTimeLineViewItemModel) -> Bool {
   
        lhs.id == rhs.id
    }

    let id = UUID() // 唯一标识
    var lTitle: String // 左侧标题
    var rTitle