讓Flutter 應用程式性能提高 10 倍的 10 個技巧

Flutter 應用程式以其精美的設計和流暢的功能而聞名，但性能問題會很快破壞使用者體驗。借助這 10 個優化性能的專家技巧，将您的應用提升到一個新的水準。

使用 WidgetsBindingObserver 跟蹤應用程式的生命周期

使用“WidgetsBindingObserver”來跟蹤您的應用程式的生命周期。此觀察器允許您在應用程式恢複、暫停或不活動時接收回調，這可以幫助您識别性能瓶頸并優化應用程式的行為。

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  void initState() {
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }
  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    // Handle state changes here
  }
  //...
}           

複制

使用 RepaintBoundary 小部件隔離應用程式的各個部分

使用“RepaintBoundary”小部件來隔離導緻性能問題的應用程式部分。“RepaintBoundary”小部件可用于包裝導緻性能問題的小部件，以便應用程式的其餘部分可以繼續平穩運作。

RepaintBoundary(
  child: MyExpensiveWidget(),
);           

複制

使用 InheritedWidget 擷取資料

将“InheritedWidget”用于向下傳遞到小部件樹的資料。“InheritedWidget”是一種特殊的小部件，可用于将資料向下傳遞到小部件樹中，這有助于減少重建次數并提高性能。

class MyInheritedWidget extends InheritedWidget {
  final int myData;

  MyInheritedWidget({
    Key key,
    @required this.myData,
    @required Widget child,
  }) : super(key: key, child: child);

  @override
  bool updateShouldNotify(MyInheritedWidget old) => myData != old.myData;

  static MyInheritedWidget of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  }
}           

複制

使用 StreamBuilder 而不是 FutureBuilder

盡可能使用“StreamBuilder”而不是“FutureBuilder”。“StreamBuilder”允許您在更新發生時接收更新，這有助于減少重建次數并提高性能。

StreamBuilder(
  stream: myStream,
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data);
    } else if (snapshot.hasError) {
      return Text(snapshot.error);
    }
    return CircularProgressIndicator();
  },
);           

複制

使用 CustomScrollView 而不是 ListView

盡可能使用“CustomScrollView”而不是“ListView”。“CustomScrollView”比“ListView”更高效，因為它隻建構目前在螢幕上可見的小部件。

CustomScrollView(
  slivers: <Widget>[
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return MyListItem(data: myData[index]);
        },
        childCount: myData.length,
      ),
    ),
  ],
);           

複制

使用 AnimationController 來控制動畫

使用“AnimationController”來控制動畫。“AnimationController”允許您控制動畫的時間和進度，這有助于減少重建次數并提高性能。

class MyAnimationWidget extends StatefulWidget {
  @override
  _MyAnimationWidgetState createState() => _MyAnimationWidgetState();
}

class _MyAnimationWidgetState extends State<MyAnimationWidget>
    with SingleTickerProvider{
    AnimationController _controller;

    @override
    void initState() {
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
    super.initState();
    }

    @override
    void dispose() {
    _controller.dispose();
    super.dispose();
    }

    @override
    Widget build(BuildContext context) {
        return AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
        // Use _controller.value to control the animation
        return Transform.translate(
        offset: Offset(0, _controller.value * 100),
        child: child,
        );
        },
        child: MyChildWidget(),
        );
    }
}           

複制

使用 Wrap 小部件而不是 ListView 小部件

盡可能使用“Wrap”小部件而不是“ListView”小部件。“Wrap”小部件比“ListView”更高效，因為它隻建構目前在螢幕上可見的小部件。

Wrap(
  children: myChildren.map((child) => MyChildWidget(child)).toList(),
);           

複制

使用 CustomPainter 小部件繪制複雜圖形

使用“CustomPainter”小部件繪制複雜的圖形。“CustomPainter”小部件允許您直接在畫布上繪制，這比建構大量嵌套的畫布要高效得多

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Draw complex graphics on the canvas
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}           

複制

使用 PerformanceOverlay 小部件檢視應用程式性能的實時可視化。

使用“PerformanceOverlay”小部件檢視應用程式性能的實時可視化。此小部件可以幫助您識别應用程式中可能導緻性能問題的區域，并為您提供有關如何優化它們的想法。

PerformanceOverlay(
  enabled: true,
  overlayRect: Rect.fromLTWH(0, 0, 200, 200),
  children: [
    // Your widgets
  ],
);           

複制

使用 Dart 内置的 Profile 和 Release 模式來測試性能

使用 Dart 内置的“Profile”和“Release”模式來測試性能。配置檔案模式為您提供詳細的性能資訊，釋出模式優化應用程式的性能和速度，這将幫助您識别和修複性能問題。

flutter run --profile

或者

flutter run --release

請注意，這些隻是代碼的示例。