Flutter：如何調試在狀態更改時重新渲染的小部件

Question

我正在使用 Redux 和 Flutter 進行狀態管理。 每當我調度一個動作時，我都想知道哪些小部件被重新渲染。 有什么辦法嗎？

Answer 1

在顫振中，每當一個小部件更新時； 整個小部件樹重繪。 所以不行。

但是您也可以通過在樹中插入RepaintBoundary小部件來手動引入“重繪邊界”。 這明確地告訴顫振為其子級創建一個新的繪畫層（這意味着內存緩存）。 因此，每當該子級更新時，它也不會重新繪制它的父級。

您可以做的是在重新繪制 RepaintBoundary 時進行調試。

為此，您可以通過以下方式啟用重繪彩虹：

• 使用flutter run時按t
• 使用帶有ctrl/cmd + shift + p的 vscode Dart Code擴展並enable repaint rainbow

Answer 2

關於渲染首先要注意的一點是：重建和重繪是不一樣的。 重建涉及布局和繪畫，而重新繪畫不涉及重新布局。

如何檢查重建

在您感興趣的任何build方法中添加print語句。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('MyApp building');                 <-- this
    return MaterialApp(...

和這個：

class MyWidget extends StatelessWidget {
  const MyWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('MyWidget building');  //         <-- here 
    return ProgressBar(...

如果您注意到您的小部件樹中有不必要的部分被重建，那么解決方案是提取樹中正在更改為它們自己的小部件的部分，最好是const小部件。

如何檢查是否重新粉刷

要查看重新繪制的內容，您可以使用Dart DevTools 。 當您的應用程序正在運行時，單擊重繪彩虹按鈕。

或者，您可以在代碼中使用以下標志：

void main() {
  debugRepaintRainbowEnabled = true;  //   <-- set this flag to true
  runApp(MyApp());
} 

正在重繪的區域有一個彩虹邊框，每次重繪都會改變顏色。 正如您在下面的動畫中看到的，每次都會重新繪制整個窗口。 （中心的藍線是小部件的一部分，而不是重繪彩虹。）

如果您想限制正在繪制的內容，您可以像這樣將 RepaintBoundary 小部件添加到您的樹中：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('MyApp building');
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            child: RepaintBoundary(  //   <-- repaint boundary
              child: ProgressBar(
                barColor: Colors.blue,
                thumbColor: Colors.red,
                thumbSize: 20.0,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

現在，當您使用 DevTools 並選擇 Repaint Rainbow 按鈕時，您會看到只有 ProgressBar 小部件正在重新繪制。

如果重繪不貴，那么這可能不是您需要擔心的事情。 至少在我看到的大多數文檔中，人們都說要盡量減少重建，但幾乎沒有人建議添加重繪邊界。 我會檢查 DartDev 工具中的時間線和性能，看看你是否需要它。 查看下面的鏈接視頻了解詳細信息。

也可以看看：

• 重繪邊界文檔
• 使用 RepaintBoundary 提高 Flutter 應用程序的性能

Answer 3

調試應用程序以查看重新渲染的小部件的最佳方法是在代碼中插入斷點。 我建議在Widget build(BuildContext context)方法中放置一個斷點。

或者，您也可以使用打印語句來確保正在調用構建方法。