【Flutter】性能優化總結

Flutter 性能優化是提升應用流暢度、響應速度和用戶體驗的關鍵。可以從以下幾個方面進行優化：

---

一、UI 構建與布局優化

1、避免不必要的重建

• 使用 const 構造函數：如 const Text('Hello')，可以減少 Widget 重建。
• 使用 const 修飾靜態 Widget 樹
• 拆分大 Widget 樹：將大的 build 函數拆分成多個小組件。

2、使用 RepaintBoundary

• 將頻繁變化的組件用 RepaintBoundary 包裹，減少不必要的重繪區域。

RepaintBoundary(child: YourWidget(),
);

RepaintBoundary 是 Flutter 中非常重要的性能優化工具，它的核心作用是隔離重繪區域，從而減少不必要的重繪，提高性能。好處如下：

• 減少不必要的重繪；
• 提升復雜頁面性能；
• 配合性能調試工具；
• 緩存機制（圖層緩存）；

3、避免嵌套過深的布局

• 用 LayoutBuilder、MediaQuery 或 Flexible 替代部分嵌套 Container、Padding 等

---

二、列表渲染優化

1、使用 ListView.builder 替代 ListView

• 懶加載構建每一個 item，避免一次性渲染所有 item。

2、使用 AutomaticKeepAliveClientMixin 保持頁面狀態

• 避免 Tab 切換時頻繁 rebuild。

class MyPage extends StatefulWidget {@override_MyPageState createState() => _MyPageState();
}class _MyPageState extends State<MyPage>with AutomaticKeepAliveClientMixin {@overridebool get wantKeepAlive => true;
}

---

三、圖像優化

1、使用 flutter_cache_manager 緩存圖片

• 避免網絡重復加載大圖。

2、用合適的分辨率加載圖片

• 盡量使用 WebP 或壓縮后的圖片資源。

3、用 FadeInImage.memoryNetwork 替代 Image.network

• 提供占位圖，有加載過渡動畫，體驗更好。

---

四、性能工具使用

1、使用 DevTools 分析性能

• CPU/內存快照（Memory、CPU Profiler）
• 重繪區域（Performance Overlay）
• Widget rebuild 追蹤（Rebuild Tracker）

flutter run --profile
flutter pub global activate devtools

---

五、狀態管理優化

1、避免 setState 影響全局

• 將 setState() 控制在局部組件范圍，避免刷新整個 widget 樹。
• 使用更輕量級的狀態管理工具如 Provider、Riverpod、ValueNotifier 等。

---

六、異步任務與卡頓處理

1、大任務用 compute() 或 Isolate

• 避免在 UI 線程中執行大量計算/IO，如 JSON 解析。

compute(parseJson, jsonString);

2、異步加載使用 FutureBuilder 或 AsyncSnapshot

• 顯示 loading 狀態，避免空白或卡死頁面。

---

七、網絡優化

1、Dio 加緩存插件（如 dio_http_cache）

• 避免重復網絡請求，提高響應速度。

2、合理使用 Gzip、緩存策略、分頁加載

• 尤其在圖片、長列表、分頁數據中非常有效。

---

八、代碼和資源清理

• 刪除未使用的資源、圖片、字體等
• 精簡依賴包，避免引入體積大但功能冗余的庫
• 使用 flutter build apk --split-per-abi 減小安裝包體積

---

九、總結表格

優化方向	推薦做法
Widget 構建	const、拆分組件、RepaintBoundary、避免嵌套
列表性能	使用 ListView.builder、keepAlive
圖片優化	緩存、壓縮、WebP、占位圖
狀態管理	避免全局 setState，用 Provider/Riverpod
異步任務	用 compute、Isolate，避免主線程阻塞
工具分析	DevTools、Performance Overlay、Widget Inspector
網絡優化	緩存、分頁、Gzip、壓縮響應
減小包體積	刪除未用資源、依賴優化、APK 分包

---

十、關于作者(ZFJ_張福杰)

• 官網：https://zfjsafe.com
• 博客：https://zfj1128.blog.csdn.net
• Github：https://github.com/zfjsyqk
• Gitee：https://gitee.com/zfj1128
• 打賞：https://zfjsafe.com/paycode