必须精准描述Widget树逻辑并校验Dart语法兼容性，否则因缺少import、BuildContext或StatefulWidget拆分导致编译失败；需安装CodeGeex插件、初始化Flutter项目、在Scaffold body处生成，并经import检查、Widget类型验证和占位节点替换三步校验后运行。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在 Flutter 开发中用 CodeGeex 自动生成可运行的跨平台 UI 界面，必须绕过它无法直接生成完整项目结构的限制，转而聚焦于精准描述 Widget 树逻辑并校验 Dart 语法兼容性——否则粘贴进 IDE 后会因缺少 import、BuildContext 上下文或 StatefulWidget 拆分规范而编译失败。
准备 CodeGeex 插件与基础环境
在 VS Code 中安装官方 CodeGeex 插件（v2.4.0+），确保已启用 Dart 和 Flutter 扩展；【未安装 Flutter SDK 或未运行 flutter doctor --android-licenses】会导致后续生成的代码无法通过本地构建校验。
打开一个已初始化的 Flutter 项目（非空目录），进入 lib/main.dart 文件，将光标置于 build 方法内 Scaffold 的 body 字段位置——这是 CodeGeex 最稳定识别的生成锚点。
用自然语言精准描述 UI 结构
在编辑器中输入注释形式的指令，例如：// 生成一个垂直布局：顶部是居中大标题“用户中心”，中间是带圆角边框和灰色背景的卡片，内含头像图标+用户名文本+邮箱文本，底部是两个等宽按钮“编辑资料”和“退出登录”。
选中该行注释 → 右键 → “CodeGeex: Generate Code” → 等待 3～5 秒生成结果。
CodeGeeX 2.21.0是智谱AI推出的AI编程助手版本，对Inline Chat功能进行了重大优化，包括UI设计升级、支持流式输出以提升响应速度，并新增“查看思路”按钮以便理解代码原理。同时，该版本在编辑器中新增CodeLens控件，支持一键“解释”代码或“添加注释”。目前该工具对个人开发者免费开放。
生成内容若出现 Row/Column 嵌套过深、未包裹 Expanded 或 Flexible 导致溢出错误，需立即删除整段并重试；【不要手动修改生成代码中的 key、context 或 setState 调用位置】，这些由 CodeGeex 自动补全的逻辑极易破坏状态管理链路。
三步校验与嵌入流程
第一步：检查 import 行 —— CodeGeex 不会自动添加缺失包，需对照生成代码中使用的组件（如 ElevatedButton、CircleAvatar）手动补全：import 'package:flutter/material.dart';
第二步：验证 Widget 类型匹配 —— 若描述中要求“点击后计数变化”，但生成的是 StatelessWidget，则必须手动改为 StatefulWidget 并补全 _State 类，否则 setState 报错。
第三步：替换占位节点 —— 将生成的 Widget 树整体复制，粘贴到 main.dart 中 Scaffold 的 body 属性值位置，覆盖原有 Center→Text 结构；保存后运行 flutter run，观察控制台是否输出 “Running with sound null safety” 及无红色报错。
