MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

如何通过优化布局减少 Flutter 应用的重绘

2024-08-186.3k 阅读

理解 Flutter 布局与重绘机制

Flutter 布局基础

在 Flutter 中，布局是构建用户界面的关键环节。Widget 树是 Flutter 构建界面的核心结构，每个 Widget 都描述了一部分界面元素。Widget 本身是不可变的，当需要更新界面时，Flutter 会构建新的 Widget 树。布局过程分为两个阶段：布局（layout） 和 绘制（paint）。

布局阶段，父 Widget 会为子 Widget 分配空间。这基于 BoxConstraints，它定义了子 Widget 可用空间的最小和最大尺寸。例如，一个 Container Widget 会根据其自身的约束以及子 Widget 的需求来确定子 Widget 的最终大小和位置。

Container(
  width: 200,
  height: 200,
  child: Text('Hello, Flutter'),
)

在上述代码中，Container 为 Text Widget 提供了固定的宽高约束，Text Widget 会在这个约束范围内进行布局。

重绘的触发原因

重绘（repaint）发生在界面状态发生变化，需要重新绘制部分或全部 Widget 树的时候。常见的触发重绘的原因有：

  1. 数据变化：例如，当一个 StatefulWidget 的状态发生改变时，Flutter 会重新构建 Widget 树。假设我们有一个计数器应用，每次点击按钮增加计数器的值，这就会触发重绘。
class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _count = 0;

  void _incrementCounter() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_count',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

每次点击 FloatingActionButton，_count 值改变，setState 方法触发 build 方法重新执行，导致界面重绘。

  1. 尺寸变化：当设备旋转或者父 Widget 的尺寸发生改变时，会触发子 Widget 的布局和重绘。例如，一个响应式布局的应用，在横屏和竖屏切换时，需要重新调整 Widget 的布局。

  2. 动画：Flutter 动画通过不断改变 Widget 的属性来实现，每一次属性变化都可能触发重绘。例如，一个淡入淡出的动画，通过改变 Opacity Widget 的 opacity 属性来实现。

class FadeAnimationApp extends StatefulWidget {
  @override
  _FadeAnimationAppState createState() => _FadeAnimationAppState();
}

class _FadeAnimationAppState extends State<FadeAnimationApp>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fade Animation'),
      ),
      body: Center(
        child: FadeTransition(
          opacity: _animation,
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

在这个动画过程中，opacity 属性不断变化，导致 FadeTransition 及其子 Widget 不断重绘。

优化布局以减少重绘

使用 const Widgets

const Widgets 是不可变的，并且 Flutter 能够在编译时确定它们的属性。这意味着在构建 Widget 树时，如果一个 Widget 及其子 Widget 都是 const 的，Flutter 可以重用它们，而不需要每次都重新构建。

const MyConstWidget = Container(
  width: 100,
  height: 100,
  color: Colors.red,
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MyConstWidget,
      ),
    );
  }
}

在上述代码中，MyConstWidget 是 const 的，无论 MyApp 构建多少次，MyConstWidget 都不会重新构建，从而减少了重绘的可能性。

避免不必要的 StatefulWidget 使用

StatefulWidget 会在状态改变时触发 build 方法重新执行，导致重绘。如果一个 Widget 的状态不需要改变，应尽量使用 StatelessWidget。

例如，我们有一个简单的展示文本的 Widget，它不需要改变状态：

class StaticTextWidget extends StatelessWidget {
  final String text;
  StaticTextWidget(this.text);

  @override
  Widget build(BuildContext context) {
    return Text(text);
  }
}

如果错误地将其定义为 StatefulWidget：

class UnnecessaryStatefulTextWidget extends StatefulWidget {
  final String text;
  UnnecessaryStatefulTextWidget(this.text);

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

class _UnnecessaryStatefulTextWidgetState
    extends State<UnnecessaryStatefulTextWidget> {
  @override
  Widget build(BuildContext context) {
    return Text(widget.text);
  }
}

虽然功能上没有区别，但 UnnecessaryStatefulTextWidget 会因为继承自 StatefulWidget 而在每次父 Widget 重绘时，即使其自身状态未改变，也可能触发不必要的重绘。

合理使用 LayoutBuilder

LayoutBuilder 可以让我们根据父 Widget 传递的约束来动态构建布局。然而，如果使用不当，可能会导致过多的重绘。

LayoutBuilder 会在其约束发生变化时重新构建其子 Widget。例如，在一个响应式布局中，我们可以使用 LayoutBuilder 来根据屏幕宽度调整布局：

class ResponsiveLayoutApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth < 600) {
          return Column(
            children: <Widget>[
              Container(
                width: double.infinity,
                height: 200,
                color: Colors.blue,
              ),
              Container(
                width: double.infinity,
                height: 200,
                color: Colors.green,
              ),
            ],
          );
        } else {
          return Row(
            children: <Widget>[
              Expanded(
                child: Container(
                  height: 200,
                  color: Colors.blue,
                ),
              ),
              Expanded(
                child: Container(
                  height: 200,
                  color: Colors.green,
                ),
              ),
            ],
          );
        }
      },
    );
  }
}

在这个例子中，当屏幕宽度改变时，LayoutBuilder 的约束变化，会重新构建子 Widget，导致重绘。为了优化，可以将 LayoutBuilder 的逻辑抽象出来，只在必要时进行构建。

class ResponsiveLayoutLogic {
  static Widget buildResponsiveLayout(BoxConstraints constraints) {
    if (constraints.maxWidth < 600) {
      return Column(
        children: <Widget>[
          Container(
            width: double.infinity,
            height: 200,
            color: Colors.blue,
          ),
          Container(
            width: double.infinity,
            height: 200,
            color: Colors.green,
          ),
        ],
      );
    } else {
      return Row(
        children: <Widget>[
          Expanded(
            child: Container(
              height: 200,
              color: Colors.blue,
            ),
          ),
          Expanded(
            child: Container(
              height: 200,
              color: Colors.green,
            ),
          ),
        ],
      );
    }
  }
}

class OptimizedResponsiveLayoutApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return ResponsiveLayoutLogic.buildResponsiveLayout(constraints);
      },
    );
  }
}

这样，ResponsiveLayoutLogic.buildResponsiveLayout 方法只在 constraints 变化时执行，减少了不必要的重绘。

减少嵌套布局

嵌套布局会增加布局计算的复杂度，进而可能导致更多的重绘。例如，过度嵌套的 Container Widget：

Container(
  child: Container(
    child: Container(
      child: Text('Deeply nested'),
    ),
  ),
)

这种深度嵌套不仅增加了布局计算时间，而且当任何一个外层 Container 的属性改变时，可能会触发内层所有 Widget 的重绘。

可以通过使用更合适的布局 Widget 来简化结构。例如，使用 Padding Widget 来代替多层嵌套的 Container 实现内边距效果：

Padding(
  padding: EdgeInsets.all(16),
  child: Text('Simplified layout'),
)

另外，Stack 和 Column/Row 等布局 Widget 可以灵活组合，以实现复杂布局而不增加过多嵌套。例如，一个包含图片和文字的卡片布局：

class CardLayoutApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 2,
            blurRadius: 5,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Stack(
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(8),
              topRight: Radius.circular(8),
            ),
            child: Image.network(
              'https://example.com/image.jpg',
              width: double.infinity,
              height: 200,
              fit: BoxFit.cover,
            ),
          ),
          Positioned(
            bottom: 16,
            left: 16,
            child: Text(
              'Card Title',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

在这个例子中，通过 Stack 和 Positioned 的组合，避免了过多的嵌套布局，同时实现了复杂的卡片样式。

使用 RepaintBoundary

RepaintBoundary 可以将其内部的 Widget 与外部隔离，减少重绘范围。当 RepaintBoundary 外部的 Widget 重绘时，只要 RepaintBoundary 内部的状态没有改变，其内部的 Widget 不会重绘。

例如，在一个包含动画和静态内容的界面中，将动画部分包裹在 RepaintBoundary 中：

class AnimationWithBoundaryApp extends StatefulWidget {
  @override
  _AnimationWithBoundaryAppState createState() =>
      _AnimationWithBoundaryAppState();
}

class _AnimationWithBoundaryAppState extends State<AnimationWithBoundaryApp>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animation with RepaintBoundary'),
      ),
      body: Column(
        children: <Widget>[
          RepaintBoundary(
            child: FadeTransition(
              opacity: _animation,
              child: Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
            ),
          ),
          SizedBox(height: 20),
          Text('Static content that won\'t be affected by animation repaints'),
        ],
      ),
    );
  }
}

在这个例子中，动画的重绘不会影响到下方的静态文本，减少了不必要的重绘。

优化动画相关布局

  1. 使用 AnimatedBuilder：AnimatedBuilder 只在动画值改变时重新构建其内部的 Widget，而不是整个父 Widget 树。
class AnimatedBuilderApp extends StatefulWidget {
  @override
  _AnimatedBuilderAppState createState() => _AnimatedBuilderAppState();
}

class _AnimatedBuilderAppState extends State<AnimatedBuilderApp>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedBuilder'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (BuildContext context, Widget? child) {
            return Opacity(
              opacity: _animation.value,
              child: child,
            );
          },
          child: Container(
            width: 200,
            height: 200,
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

在这个例子中，只有 Opacity Widget 会随着动画值的改变而重新构建，而 Container Widget 不会因为动画的变化而重复构建，减少了重绘。

  1. 控制动画帧率：过高的动画帧率会导致更多的重绘。可以通过设置 AnimationController 的 duration 来调整动画帧率。例如，将一个动画的持续时间从 1 秒延长到 2 秒，可以减少每秒的重绘次数。
_controller = AnimationController(
  vsync: this,
  duration: Duration(seconds: 2),
)

同时，使用 TickerProviderStateMixin 来管理动画，可以确保动画在 Widget 销毁时正确停止，避免不必要的重绘。

性能监测与调试

使用 Flutter DevTools

Flutter DevTools 是一个强大的工具集，可用于监测和调试 Flutter 应用的性能。其中，Performance 标签页可以帮助我们分析重绘情况。

在 DevTools 的 Performance 面板中，我们可以记录应用的性能数据。通过分析 Frames 图表，可以查看每帧的绘制时间。如果某一帧的绘制时间过长，可能意味着存在重绘问题。

例如，我们运行一个包含动画的应用，并在 DevTools 中记录性能数据。如果发现动画过程中某些帧的绘制时间明显高于其他帧，可能是动画相关的布局没有优化好，导致过多的重绘。

代码层面的调试

  1. 使用 debugPrint：在关键的布局和重绘相关代码处添加 debugPrint，可以输出关键信息，帮助我们了解布局和重绘的触发情况。
class DebuggingLayoutApp extends StatefulWidget {
  @override
  _DebuggingLayoutAppState createState() => _DebuggingLayoutAppState();
}

class _DebuggingLayoutAppState extends State<DebuggingLayoutApp> {
  int _counter = 0;

  void _incrementCounter() {
    debugPrint('Incrementing counter, about to trigger setState');
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    debugPrint('Building DebuggingLayoutApp');
    return Scaffold(
      appBar: AppBar(
        title: Text('Debugging Layout'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter: $_counter',
            ),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

通过观察控制台输出的 debugPrint 信息，我们可以了解到 setState 何时被调用以及 build 方法何时被执行，从而分析重绘的原因。

  1. 断言（assert）：在代码中使用断言可以确保某些条件在布局和重绘过程中始终成立。例如，我们可以断言某个 Widget 的尺寸不会超出特定范围，以避免因尺寸异常导致的重绘问题。
class AssertionApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double width = 200;
    assert(width <= 300, 'Width should not exceed 300');
    return Container(
      width: width,
      height: 200,
      color: Colors.red,
    );
  }
}

如果 width 超过 300，断言会失败并抛出错误，帮助我们及时发现潜在的布局问题。

通过以上优化布局的方法以及性能监测与调试手段，我们可以有效地减少 Flutter 应用的重绘，提升应用的性能和用户体验。在实际开发中，需要综合运用这些方法，并根据具体的应用场景进行优化。