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 條評論
還沒有評論，來搶沙發～