优化Flutter滚动性能：ScrollListenWidget的威力

无敌何尝不可
606 阅读3分钟

介绍

Flutter是一种流行的跨平台移动应用程序开发框架，提供了丰富的小部件，使开发人员能够创建漂亮且性能优越的用户界面。然而，在处理复杂的可滚动视图和大量数据时，由于频繁触发滚动事件而可能遇到性能问题。在本文中，我们将探讨一个名为ScrollListenWidget的自定义小部件，旨在解决Flutter应用程序中的滚动性能问题。

ScrollListenWidget组件源码

import 'dart:math';

import 'package:flutter/material.dart';

typedef ChangeColorWidget = Widget Function(Color animateColor, Color? fgColor);

///可以监听ScrollController滑动进度的组件，用来处理滑动监听卡顿的问题。
class ScrollListenWidget extends StatefulWidget {
  final ScrollController scrollController;
  final Color fullColor;
  final Color? startColor;
  final Color? endColor;
  final ChangeColorWidget child;
  final double scrollOffsetY;

  const ScrollListenWidget({
    Key? key,
    required this.scrollController,
    required this.fullColor,
    required this.child,
    required this.scrollOffsetY,
    this.startColor,
    this.endColor,
  }) : super(key: key);

  @override
  State<ScrollListenWidget> createState() => _ScrollListenWidgetState();
}

class _ScrollListenWidgetState extends State<ScrollListenWidget> {
  late Color _appBarColor;
  Color? _appBarFgColor;

  @override
  void initState() {
    // 140.h
    _appBarColor = widget.fullColor.withOpacity(0);
    _appBarFgColor = widget.startColor;
    widget.scrollController.addListener(() {
      double o =
          min(1.0, widget.scrollController.offset / widget.scrollOffsetY);
      var color = widget.fullColor;
      if (o == 1.0 && _appBarColor == color) {
        if (widget.endColor != null && _appBarColor == widget.endColor) {
          return;
        } else if (widget.endColor != null && _appBarColor != widget.endColor) {
          //do nothing
        }
      }

      setState(() {
        _appBarColor = color.withOpacity(o);

        if (widget.startColor != null && widget.endColor != null) {
          if (o < 1.0 && _appBarColor != widget.startColor!) {
            _appBarFgColor = widget.startColor!;
          } else if (o == 1.0 && _appBarColor != widget.endColor) {
            _appBarFgColor = widget.endColor!;
          }
        }
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return widget.child(_appBarColor, _appBarFgColor);
  }
}

目的：解决滚动时全局setState的卡顿性能问题，让只需要滚动时交互的组件进行交互。避免不必要的、复杂的布局在setState的回调下频繁重构。

  1. ScrollListenWidget的关键特性

    • ScrollController：ScrollListenWidget将ScrollController作为其中一个参数。该控制器用于监视附加的可滚动小部件的滚动事件。
    • 颜色过渡：ScrollListenWidget的主要功能之一是在用户滚动时动画化其子部件的背景颜色。颜色过渡基于滚动进度，为应用程序带来视觉上的愉悦效果。
    • 起始和结束颜色：开发人员可以设置起始和结束颜色，实现平滑的颜色渐变过渡，使用户在滚动内容时获得良好的视觉体验。
    • 处理滚动偏移：该小部件还接受scrollOffsetY参数，允许开发人员控制颜色过渡完成的滚动位置。当希望在特定滚动距离内实现所需的过渡效果时，该参数非常有用。
    • AppBar前景颜色：除了动画化背景颜色外，ScrollListenWidget还可以调整其子部件的前景颜色，创造统一的UI体验。

  2. 实现细节：

    • ScrollListenWidget作为StatefulWidget实现，以便管理滚动过程中颜色的动态变化。
    • 在initState()方法中，小部件设置初始颜色值并将监听器附加到提供的ScrollController上。
    • 每当用户滚动时，监听器都会触发，根据当前的滚动偏移和scrollOffsetY参数计算滚动进度。
    • 计算得到的滚动进度用于更新_appBarColor和_appBarFgColor变量，从而触发小部件的重建。
    • 小部件重新构建时会使用更新后的颜色值，从而实现在用户滚动内容时平滑且视觉上愉悦的颜色过渡效果。

  3. 使用示例：

    ScrollController _scrollController = ScrollController();
// ...

@override
Widget build(BuildContext context) {
  return ScrollListenWidget(
    scrollController: _scrollController,
    fullColor: Colors.blue, // 起始颜色
    startColor: Colors.green, // 开始颜色
    endColor: Colors.red, // 结束颜色
    scrollOffsetY: 200.0, // 颜色过渡完成的滚动距离
    child: (animateColor, fgColor) {
      return Scaffold(
        appBar: AppBar(
          backgroundColor: animateColor,
          foregroundColor: fgColor,
          title: Text('ScrollListenWidget示例'),
        ),
        body: ListView.builder(
          controller: _scrollController,
          itemBuilder: (context, index) {
            return ListTile(title: Text('列表项 $index'));
          },
          itemCount: 100,
        ),
      );
    },
  );
}

结论： 通过引入ScrollListenWidget，我们可以在Flutter应用程序中实现更流畅的滚动体验，解决滚动监听卡顿的问题。优化的滚动性能将为用户带来更好的使用体验，使应用程序更加吸引人。开发人员可以根据具体需求配置ScrollListenWidget的参数，定制颜色过渡效果，从而为用户提供令人满意的滚动交互。

avatar
文章
阅读
粉丝