Flutter 页面怎么写提示词（Widget 拆分、状态放哪、列表性能、加载与错误态，按所用状态管理库给写法）
用 Flutter 写页面时不知道 Widget 怎么拆、状态该放在哪一层，或者列表一滚就卡时用。填入页面需求和所用的状态管理库，AI 先出状态清单、组件树和四种界面状态的设计，确认后再给代码和一份性能自查清单。
通用大模型 对话模型通用
请帮我设计并实现一个 Flutter 页面。先出设计，我确认后再写代码。 Flutter 版本：[Flutter 版本] 状态管理库及版本：[状态管理库]（如 Provider、Riverpod、Bloc，或只用 setState） 页面需求：[页面需求描述] 数据来源：[数据来源]（接口、本地数据库，还是两者都有） 现有代码（可选）：[现有代码] ▍设计部分（先输出这部分，然后停下） 1. 状态清单表：状态 | 属于谁（单个组件的临时状态、整页状态、跨页面共享）| 放在哪 | 谁能改。输入框焦点、展开折叠这类临时状态留在 StatefulWidget 里，不要全塞进全局。 2. 组件树：把页面拆成若干独立的 Widget 类，说明每个的入参。拆分用独立的类，而不是「返回 Widget 的私有方法」，并解释这样做对 const 构造和局部重建的好处。 3. 页面四态：加载中、有数据、空数据、出错（含重试），每种显示什么。 ▍代码部分（我回复「继续」后输出） 4. 按我用的状态管理库给写法，监听范围尽量小：只有用到某个状态的子组件重建，而不是整页重建。 5. 列表用懒构建的方式（如 ListView.builder），列表项带稳定的 Key；行高固定时，说明可以怎样告诉列表以减少布局计算。 6. 异步：不要在 build 方法里直接创建 Future；await 之后使用 context 之前，先检查组件是否还挂载；控制器、订阅在 dispose 里释放。 ▍自查清单（代码之后） 7. 逐项标注是否满足：能用 const 的地方是否用了、build 里有没有耗时计算、图片是否按显示尺寸解码、长列表滚动时有没有不必要的重建。 状态管理库的 API 随版本变化较大，请按我写的版本给写法，拿不准的标「需核对官方文档」。
高亮处换成你自己的内容：[Flutter 版本]、[状态管理库]、[页面需求描述]、[数据来源]、[现有代码]
ChatGPT Plus 充值
已被复制 0 次
使用说明
怎么填变量：[状态管理库] 一定要带上版本，同一个库不同大版本的写法差别很大；还没选库就写「只用 setState」，AI 会先用最基础的方式实现。[页面需求描述] 写清楚有哪些区域、能做什么操作，例如「订单列表，下拉刷新、上拉加载更多、点击进详情、顶部按状态筛选」。[数据来源] 影响加载和错误态怎么设计。
常见问题与调整：
- 整页都在重建 → 追问：「指出代码里哪些 Widget 监听了它用不到的状态，改成只监听需要的那部分。」
- 列表滚动掉帧 → 追问：「按自查清单逐项检查我的列表项代码，按影响大小排序给出修改。」
- 想换状态管理库 → 追问：「保持组件树不变，把状态层改成另一个库的写法，列出改动的文件。」
示例输出
示例，仅供参考（订单列表页，只用 setState，设计与代码节选）
| 状态 | 属于谁 | 放在哪 |
|---|---|---|
| 订单数据与加载结果 | 整页 | 页面的 State |
| 当前筛选的订单状态 | 整页 | 页面的 State |
| 单个订单卡片是否展开 | 单个组件 | 卡片自己的 State |
组件树：OrderListPage → StatusFilterBar、OrderListView → OrderCard。
dart
late final Future<List<Order>> _future;
@override
void initState() {
super.initState();
_future = widget.repo.fetchOrders(); // 只创建一次，重建时不会重复请求
}如果把 fetchOrders() 直接写进 FutureBuilder 的 future 参数，页面每次重建都会重新发请求，界面会反复闪回加载态。
同款作品
用这条提示词做出来的作品；原作者会因此获得积分
还没有同款，来做第一个。
0 条评论
还没有评论，来抢沙发～