vlambda博客
学习文章列表

昨天说到哪了，忘了都。

TravelGo App 其实逻辑很简单，也不知道是因为用户需求过于小还是这种需求本身就傻逼，目前还没有类似的软件。

App 从用户购买完成行程的票时，App 就应该规划整个行程中的各种事情。（有点类似航旅纵横吧）包括几时出发，当地的气温湿度，预约好车和酒店。用户在其中不用切换到其他软件，即便遇到了主观或是客观的因素，App 也有各种应急预案，全方位的保护那种没一点丁点时间规划的用户，再也不用在行程中充满焦虑。

App 的界面类似一个任务list，App自动生成在行程中的各类事件，如该出发的时间、去往机场的事件、乘坐飞机的事件等等，将每个事件具体化，并自动生成每每个事件的子事件。

这种带有预测的视图较为直观地展现了未来会发生的事件，并且可以将从心理角度将用户的焦虑感降低。

不过这是一个要将众多已经打包好的数据 API 集合到一起的 App，以我半脚猫的功夫，想也是搞不定。于是我先从 UI 界面入手，当然这个 App 我引以为傲的也正是这种展示视图。

在我玩弄了无数次 playground 里各种算术题和 print("Fuck me!") 后，我决定从 SwiftUI 入手。SwiftUI 是 2019 年 WWDC 发布的，用于编写 iOS、iPadOS、macOS、tvOS 的界面，如果我没记错的话。

SwiftUI 对于我这种刚入门的想急于先做好 UI 的人来说，简直是天赐良物。具体的代码类型的优劣势我不敢造次，只能说这种代码对于我来说很直观，像是在 Sketch 里打代码一样。

我在界面设计上借鉴了很多 Apple 自家 App 风格，希望使用 Xcode 自带的的组件来完成我这个小 App，当然这是异常艰难的。

侧边条

在 TravelGo 画面中，左侧有一个始终存在的侧边条，连接所有 App 中生成的事件，在视觉上营造一种「时间线」的感觉。这个侧边条连接第一个事件模块到最后一个固定的提示模块，普通的 offset 无法满足这个效果，于是我让侧边条与事件模块的 view 构造成 ZStack，让这个 Rectangle 自适应整个事件模块的 view，当时事件模块的 view 因为其中事件模块的高度改变而改变时，侧边条也会同时改变。同时设置 Rectangle 的 offset 到线条与第一个事件模块对其，并且 padding 到侧边条末端与最后一个提示模块对其。这样，当事件模块的 view 改变时，侧边条就可以完美同步长度了。

struct NowView: View { var body: some View { ScrollView(showsIndicators: false) { ZStack { Rectangle() .padding(.bottom, 110) .frame(width: 6) .offset(x: -174.5, y: 80) .foregroundColor(Color("line")) VStack(spacing: 0) { ForEach(Datas) { Data in TheCardView(Data: Data) } BottomView() } } .frame(maxWidth: UIScreen.main.bounds.width) .padding(.top, 90) } }}