我正在参加 Trae AI 编码从入门到实践线上共学第一期，Trae 免费下载链接： www.trae.ai
利用Trae不敲一行代码实现如图APP：
创建基础项目
第一步、创建一个名叫wechat_account的Flutter项目。
创建项目时Trae会利用电脑上面的Futter开发环境创建，猜想如果电脑没有Flutter环境应该会提示先安装环境。
第二步、运行基础项目到模拟器查看效果
运行该项目的时候会有命令行询问的交互效果，如图。点击运行即可，等到一系列操作之后就会运行到模拟器中，这里我的模拟器是提前打开的。
运行项目时Trae会自动修复一些异常比如：
Trae打开的目录并不是Flutter根目录，它会自动修复再次运行项目。
PS .> flutter run -d emulator-5554
Error: No pubspec.yaml file found.
This command should be run from the root of your Flutter project.
运行效果图：
到此为止，基础项目就创建并运行成功了。
项目实战
投喂设计图生成项目框架
设计图是本文章开头的设计
等待Trae生成项目对相应的代码
这里Trae生成的代码并不符合我投喂的设计图的需求(底部导航栏不符合设计图)自己给自己加戏了，所以重新修改描述再次来过，所以跟AI交互式生成代码也是需要技巧的。
重新来过：
Teae完成以下工作：
已完成微信界面的重构工作，主要完成了以下内容：
创建了四个独立的页面组件文件：
- chat_page.dart：微信聊天列表页面
- contacts_page.dart：通讯录页面
- discover_page.dart：发现页面
- profile_page.dart：我的页面
每个页面都实现了符合微信风格的UI设计：
-
统一的顶部导航栏样式
-
列表项布局和间距
-
分割线样式
-
图标和文字样式
-
在main.dart中实现了：
-
统一的主题设置
-
底部导航栏
-
页面切换功能 整体UI风格统一，符合微信的设计规范，包括颜色、字体、间距等细节的处理
-
该条命令执行之后，模块重新拆分了，但是模块不符合要求，我们再次来调教Trae。
通过该条命令Trae完成了以下：
- 删除了不需要的页面文件（chat_page.dart、contacts_page.dart、discover_page.dart）
- 创建了三个主要页面组件：
- interaction_page.dart：互动页面，展示用户动态和互动信息
- post_page.dart：发表页面，包含发表内容和草稿功能
- profile_page.dart：我的页面，展示个人信息和功能菜单
- 更新了main.dart文件：
- 重构了底部导航栏，只保留互动、发表、我三个选项
- 更新了对应的页面路由和图标 所有页面都按照设计要求实现了基本布局和样式，保持了统一的设计风格
此时已经完成开发了，现在我们运行项目看看效果。
个人认为这里有个待优化的点：之前已经运行过一次了再次运行还会进行环境检测，有点费时间
当前效果如下：
总结：
1、到目前为止项目基本框架已经实现，三个子模块也能正常切换展示，但是AI会擅自生成一些目前不需要的代码，图标目前来说和图片不是完全匹配的
2、从非专业开发者角度来说，功能还是能用，开发工程中有些步骤太耗时了，比如环境重复检测，我们可以让Trae将热重载的方式运行项目
3、如果拥有相关开发知识，有些步骤可以自己操作，节省AI思考时间
