Flutter 项目 -从 0 到 1 实现 iOS WatchApp

没做过那就得问专业的

开局先整个 iOS WatchApp 专家

第一步：添加 Watch Target

1、打开你现有的 iOS 工程。

2、点击 Xcode 顶部的 File > New > Target。

3、在弹出的窗口中，顶部选择 watchOS 选项卡。

4、选择 App 模板，点击 Next。

5、配置参数：

Product Name: 建议叫 YourAppNameWatch。
Interface: 选 SwiftUI（官方标准）。
Language: Swift。
Watch App Setup: 选 Watch App for Existing iOS App（这会把 Watch 和你现在的 iOS App 绑定）。

6、点击 Finish，如果询问是否 Activate Scheme，点击 Activate。

创建好的目录结构

简单介绍一下：

好极了！看到这个目录结构，说明你已经成功迈出了第一步。这是最现代的 SwiftUI-based Watch App 结构。

作为你的"技术合伙人"，我来为你详细拆解这几个文件的分工，让你一眼看穿它们的逻辑：

watchkitappApp.swift (App 入口)
这是整个 Watch App 的生命周期管理器，相当于 iOS 中的 AppDelegate。

作用：它定义了 App 的启动入口。你会看到 @main 属性，这意味着系统从这里开始运行。
代码逻辑：它包含一个 WindowGroup，里面包裹着你的主视图（通常是 ContentView）。
建议：如果你需要初始化一些全局变量、或者监听 App 进入后台/回到前台的状态，在这里处理。

ContentView.swift (主界面)
这是你的核心画布，也就是你刚才在模拟器上看到的那个界面。

作用：所有的 UI 元素（Text, Button, List 等）都写在这里。
建议：Watch 的屏幕很珍贵，建议尽量使用 SwiftUI 的 List 进行纵向布局，并配合 navigationTitle 使用。

watchkitapp Watch App (黄色图标文件)
这是一个 Entitlements（权限/声明）文件，或者叫配置声明。

作用：它告诉系统这个 App 有哪些"特权"。比如是否需要访问健康数据（HealthKit）、是否支持实时活动（Live Activities）等。
注意：平时你不需要去改动它，但如果你后面要做"表盘组件（Complications）"，这里的配置会变得很重要。

Assets.xcassets (资源库)

作用：存放所有的图片资源、颜色定义，以及最重要的 App Icon。
关键点：Watch 的图标和 iPhone 不同，它是圆形的。你需要在这里提供各种尺寸的圆形图标，否则安装到真机上会显示默认的占位图。

Preview Content (预览辅助)

作用：专门放开发阶段用的"假数据"或测试图片。
优点：这里的文件只会在 Xcode 预览模式下加载，不会被打包进最终发布给用户的 App 里，所以不会增加 App 的体积。

因为我是在 Flutter 项目中创建的，因此报错了❌

bash 复制代码

Cycle inside Runner; building could produce unreliable results.
Cycle details:
→ Target 'Runner' has copy command from '/Users/liyanhong/Library/Developer/Xcode/DerivedData/Runner-gepurqquasximiaamgsyefnfbzwb/Build/Products/Debug-watchsimulator/watchkitapp Watch App.app' to '/Users/liyanhong/Library/Developer/Xcode/DerivedData/Runner-gepurqquasximiaamgsyefnfbzwb/Build/Products/Debug-iphonesimulator/Runner.app/Watch/watchkitapp Watch App.app'
○ That command depends on command in Target 'Runner': script phase "[CP] Copy Pods Resources"
○ That command depends on command in Target 'Runner': script phase "Thin Binary"
○ Target 'Runner' has process command with output '/Users/liyanhong/Library/Developer/Xcode/DerivedData/Runner-gepurqquasximiaamgsyefnfbzwb/Build/Products/Debug-iphonesimulator/Runner.app/Info.plist'
○ Target 'Runner' has copy command from '/Users/liyanhong/Library/Developer/Xcode/DerivedData/Runner-gepurqquasximiaamgsyefnfbzwb/Build/Products/Debug-watchsimulator/watchkitapp Watch App.app' to '/Users/liyanhong/Library/Developer/Xcode/DerivedData/Runner-gepurqquasximiaamgsyefnfbzwb/Build/Products/Debug-iphonesimulator/Runner.app/Watch/watchkitapp Watch App.app'
...

这个报错在 Flutter 项目中添加 Watch Target 时非常经典。它的核心原因是 Xcode 编译顺序冲突（Dependency Cycle）。

简单来说，Xcode 的新构建系统非常严格。你的 Runner (iOS) 试图在某些脚本（比如 CocoaPods 的脚本）还没跑完时就去拷贝 Watch App，导致了逻辑闭环。
解决方案：调整 Build Phases 顺序

在 Xcode 左侧项目导航栏点击最顶部的蓝图标 Runner。
在右侧 TARGETS 列表中选择 Runner (注意是 iOS 的那个 target，不是 Watch 的)。
点击顶部的 Build Phases 选项卡。
找到 Embed Watch Content 这一行。
关键动作：用鼠标拖动 Embed Watch Content，把它移动到如图位置。

第二步：写界面

当然不是自己写，交给AI 写，用的国产AI 给他设计图和需求描述，别说还原度还挺高的

再让 AI 微调一下

至此我的需求已经完成咯，网络请求接口定义、数据解析这里是提前写好的让AI 调用的，资源这些也是下载命名好的，这些准备好了，就可以让AI 完成需求了。

最后模拟器跑一下，完美