Flutter界面布局描述文档生成提示词

发表于 分类于
根据前端生成页面的提示词整理了Flutter端界面布局描述的提示词……

根据前端生成页面的提示词整理了Flutter端界面布局描述的提示词。

将下方所有内容和UI设计稿提供给AI让其生成描述文档。

然后再将描述文档和UI设计稿提供给Ai让其使用flutter画布局，简单页面跟UI设计稿基本没太大区别。

复杂页面跟UI设计稿有出入，但整理架构不会变改改就能用。

下方为提示词，可全部复制

Flutter界面布局描述文档生成提示词

请基于提供的页面截图，生成一个极其详细的Flutter界面布局描述文档，用于指导AI准确生成Flutter Widget代码。描述需要包含以下具体内容：

1. 整体页面架构

Scaffold结构

  • AppBar配置（标题、背景色、elevation、leading/actions按钮）
  • Body布局模式（Column、Row、Stack、ListView等主要容器Widget）
  • BottomNavigationBar或FloatingActionButton配置
  • Drawer或EndDrawer侧边栏设置

页面层次结构

  • 主要区域划分和Widget嵌套层次
  • 每个区域的相对位置、尺寸比例和间距（使用EdgeInsets、SizedBox等）
  • 整体布局模式（垂直Column、水平Row、Stack层叠、Grid网格、ListView列表）

2. Widget层级和嵌套关系

容器Widget结构

  • 从Scaffold到具体UI元素的完整Widget树
  • Container、Padding、Margin的具体数值
  • Expanded、Flexible的flex比例设置
  • SafeArea、SingleChildScrollView等包装Widget

布局Widget配置

  • Column/Row的mainAxisAlignment和crossAxisAlignment
  • Stack的alignment和positioning
  • GridView的crossAxisCount和spacing
  • ListView的scrollDirection和itemBuilder

3. 具体UI元素规格

文本组件（Text Widget）

  • 文字内容和TextStyle配置
  • fontSize、fontWeight、color的具体数值
  • textAlign、overflow、maxLines等属性
  • 自定义字体family（如果使用）

按钮组件

  • ElevatedButton、TextButton、OutlinedButton、IconButton的选择
  • ButtonStyle配置（backgroundColor、foregroundColor、elevation）
  • 按钮尺寸（minimumSize、padding）
  • onPressed回调函数说明

输入组件

  • TextField/TextFormField配置
  • InputDecoration（hintText、labelText、border、prefixIcon、suffixIcon）
  • TextEditingController和验证逻辑
  • keyboardType和textInputAction

图片和图标

  • Image.asset、Image.network的路径和配置
  • Icon的IconData、size、color
  • fit、alignment等图片显示属性

卡片和容器

  • Card的elevation、margin、shape
  • Container的decoration（BoxDecoration配置）
  • 背景色（Colors.xxx或Color(0xFFxxxxxx)）
  • 边框样式（Border.all、BorderRadius.circular）
  • 阴影效果（boxShadow配置）

列表和网格

  • ListView.builder的itemCount和itemBuilder
  • GridView.count的crossAxisCount和children
  • ListTile的leading、title、subtitle、trailing
  • 分隔线Divider的配置

4. 主题和样式

颜色方案

  • 主色调（primarySwatch、primaryColor）
  • 强调色（accentColor、secondaryColor）
  • 背景色（backgroundColor、scaffoldBackgroundColor）
  • 具体颜色值（使用Colors.xxx或十六进制值）

尺寸规范

  • 标准间距值（8.0、16.0、24.0、32.0等）
  • 字体大小层级（12.0、14.0、16.0、18.0、24.0等）
  • 组件高度（AppBar: 56.0、ListTile: 72.0等）
  • 圆角半径（4.0、8.0、12.0、16.0等）

5. 交互和状态

手势处理

  • GestureDetector的onTap、onLongPress等
  • InkWell的点击效果配置
  • 滑动手势（onPanUpdate、onSwipe等）

状态管理

  • StatefulWidget的状态变量
  • setState调用时机
  • 需要响应状态变化的Widget

6. 响应式设计

屏幕适配

  • MediaQuery.of(context).size的使用
  • 不同屏幕尺寸下的布局调整
  • Orientation的横竖屏适配

约束和弹性布局

  • Expanded和Flexible的使用场景
  • AspectRatio的比例设置
  • LayoutBuilder的约束响应

描述要求

描述要足够详细和准确，使得Flutter开发者仅凭文字描述就能完全还原界面设计，无需再次查看原图。请按照以下顺序组织内容：

  1. 从整体到局部：先描述Scaffold整体结构，再深入到具体Widget
  2. 从外层到内层：按照Widget嵌套层次，从父容器到子组件
  3. 从布局到样式：先确定组件位置和尺寸，再描述视觉样式
  4. 从静态到动态：先描述静态UI，再说明交互行为

代码组织建议

文件结构

  • 主页面Widget类名和文件名
  • 自定义Widget的拆分建议
  • 常量和样式的单独文件管理

性能优化

  • const构造函数的使用
  • Widget复用的建议
  • 避免不必要的rebuild

可维护性

  • 组件拆分的粒度建议
  • 样式统一管理
  • 硬编码值的常量化

通过以上详细描述，开发者可以准确理解设计意图，并使用Flutter框架高效实现界面效果。