Flutter上线项目实战——性能优化篇(未完待续)

最新推荐文章于 2025-03-14 17:34:11 发布

原创最新推荐文章于 2025-03-14 17:34:11 发布 · 209 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #dart #android

Flutter 专栏收录该内容

12 篇文章

订阅专栏

本文通过两个实例展示了如何优化Flutter应用的性能。首先，通过将setState移动到JumpButton内部，减少不必要的页面重绘。其次，利用RepaintBoundary组件隔离跑马灯动画的影响，避免其他部分的过度绘制。这些技巧能有效提升用户体验并减少资源消耗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例子 1、

现有一个滑动聊天页面出现/隐藏jump按钮的需求:

🔗

优化前：ListView外层setState实现:

class _ChatListViewWidgetState extends State<ChatListViewWidget> {
  ScrollController scrollController;
  double _chatListOffset = 0;
  
    @override
  void initState() {
    super.initState();

    scrollController = new ScrollController()
      ..addListener(() {
        setState(() {
          _chatListOffset = scrollController.offset;
        });
      });
  }
    
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: <Widget>[
        ListView.builder(
          controller: _scrollController,
          ...
        ),
        _chatListOffset > 150 ? Image.asset('jump.png') : SizedBox()
      ],
    );
  }
}

优化后：在JumpButton内部setState实现

class JumpButton extends StatefulWidget {
  ScrollController scrollController;

  JumpButton({this.scrollController});

  @override
  _JumpButtonState createState() => _JumpButtonState();
}

class _JumpButtonState extends State<JumpButton> {
  double _chatListOffset = 0;

  @override
  void initState() {
    super.initState();
    widget.scrollController.addListener(() {
      setState(() {
        _chatListOffset = widget.scrollController.offset;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return _chatListOffset > 150 ? Image.asset('jump.png') : SizedBox();
  }
}

开启 DevTools 的 Repaint RainBow差别:

🔗

左边是优化前: 发现在滑动过程中，ListView在不断的绘制，右边为优化后，在按钮出现的时候绘制一次

思考与总结:

setState会导致当前页面根节点开始遍历，所以我们要在需要重新渲染的Widget内部进行setState更新自己，可以有效防止多余的树节点遍历。参考flutter官方的性能测试视频也有相应的讲解：https://www.bilibili.com/video/BV1F4411D7rP 的13’开始

例子 2、

现有一个在聊天页面上层悬浮一个跑马灯的需求:

功能实现:

// 聊天页面
Stack(
      alignment: Alignment.bottomCenter,
      children: <Widget>[
        ListView.builder(...),
        /// 跑马灯
        MMarqueeWidget(),
      ],
)

参考徐医生的dojo

// 跑马灯组件实现，
import 'package:flutter/material.dart';

class MMarqueeWidget extends StatefulWidget {
  final Widget child;

  MMarqueeWidget({Key key, this.child}) : super(key: key);

  @override
  _MMarqueeWidgetState createState() => _MMarqueeWidgetState();
}

class _MMarqueeWidgetState extends State<MMarqueeWidget> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<Offset> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this, duration: Duration(seconds: 10));
    animation = Tween<Offset>(begin: Offset(1, 0), end: Offset(-1, 0)).animate(controller);
    controller.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animation,
      builder: (context, _) {
        return ClipRect(
          child: FractionalTranslation(
            translation: animation.value,
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: widget.child,
            ),
          ),
        );
      },
    );
  }

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

开启 DevTools 的 Repaint RainBow

🔗

发现跑马灯动画会导致其他部分也重绘

RepaintBoundary优化

  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: AnimatedBuilder(
        animation: animation,
        ...
      ),
    );
  }