AI 助手界面 SwiftUI 原生风格做法

用 SwiftUI 重建 AI 助手界面，图的是 React Native 给不了的东西：纯原生的滚动手感、和系统深度集成的能力、几乎为零的运行时开销。SwiftUI 的声明式写法也很适合对话这种数据驱动的界面，状态一变视图自动更新。设计起步用一个干净的原生稿，再让 Claude 生成 SwiftUI 代码，把声明式的优势发挥出来。

为什么用 SwiftUI 写对话

AI 助手 App 的留存高度依赖第一次对话的顺滑度：普通 App 次日留存只有约 25%，对话一卡顿、滚动不跟手，用户就走了。SwiftUI 的 ScrollViewReader、动画和惰性渲染天生为这种场景准备，配合苹果的人机界面指南 能把原生质感拉满。声明式的好处是：你只描述状态对应的样子，框架替你处理更新。这跟命令式思路很不一样，你不再手动去操作某个视图，而是改一个状态值，让 SwiftUI 自己算出该长什么样，对话这种状态频繁变化的界面尤其受益，代码也更短更稳。

核心视图怎么搭

用 SwiftUI 的原生能力把 AI 助手界面拆成下面几块。

视图	SwiftUI 实现要点
消息列表	ScrollView + LazyVStack，惰性渲染
自动滚动	ScrollViewReader，更新后滚到最新
输入栏	TextField 配 axis: .vertical 多行
流式内容	@State 字符串逐段追加，自动重渲染

实战示例

做一个写作助手的对话页：在 VP0 挑一个 AI 助手原生设计，复制链接喂给 Claude Code 生成 SwiftUI 代码。消息列表用 ScrollView 加 LazyVStack，外面包一层 ScrollViewReader，每来一段流式内容就 scrollTo 最新一条。输入栏用 TextField 多行模式，图标统一用 SF Symbols。需要更克制的版式参考，看 SwiftUI 极简模板；要带日历健康卡的复杂页，看 SwiftUI 日历健康钱包。整套搭下来你会发现，SwiftUI 写对话的代码量比想象中少，难点几乎都集中在把流式追加和自动滚动这两件事配合好。

常见误区

最常见的错误是流式输出时手动操作滚动位置，结果跟内容更新打架、跳来跳去。正确做法是交给 ScrollViewReader，在内容变化时滚到锚点。另一个坑是把所有状态堆在一个庞大的 @State 里，视图频繁重渲染卡顿，应该按视图拆分状态、能用 @Observable 就用。还有一个常被忽略的点是深色适配：用语义色而不是写死颜色，浅色深色才能一起照顾到，这在对话类暗色界面里尤其明显。把声明式思路吃透，SwiftUI 写对话其实很轻，大部分力气只花在把状态理清楚上。

关键要点

• SwiftUI 写 AI 助手靠 @State 管流式、ScrollViewReader 自动滚到底。
• 普通 App 次日留存只有约 25%，对话滚动的跟手度直接影响留存。
• 输入栏用 TextField 多行模式，图标用 SF Symbols，质感贴系统。
• 想免费起步，VP0 是挑原生设计、让 AI 生成 SwiftUI 代码的最佳选择。

常见问题

关于 SwiftUI 做 AI 助手，问得最多的是流式怎么实现、多行输入怎么做、和 React Native 怎么选。一句话收尾：SwiftUI 的声明式让对话界面写起来比想象中轻，把状态理清楚，原生质感就是顺带的事。