颤振禁用滚动动画列表 - Dart

在Flutter中，我们可能会经常遇到需要展现一个列表的情况。而在滚动这个列表时，Flutter会自动默认使用一个滚动动画来让用户有更好的体验。但是，在某些情况下，你可能不希望出现这个滚动动画，比如在加载大量数据时，滚动动画会消耗大量的性能，从而导致用户体验变差。这时，我们可以使用“颤振禁用滚动动画”的方法来提升用户体验。

如何禁用滚动动画？

在Flutter中禁用列表滚动动画很简单。你只需要使用以下代码即可：

ListView.builder (
  physics: const NeverScrollableScrollPhysics(),
  itemBuilder: (context, index) {
    // TODO: build your list
  },
  itemCount: 100,
),

其中 NeverScrollableScrollPhysics 可以禁用所有的滚动效果，也可以只禁用特定的滚动效果。

颤振技术

“颤振”技术原本是一种航空领域的术语，意思是在飞机或者火箭进入稳定状态前所发生的一种振荡。在Flutter中，“颤振”技术指的是禁用滚动动画，在用户手动滑动后，列表滚动的场景。这样可以提供更加灵敏的交互体验，让用户能更加快速地找到自己需要的内容。

代码实例

下面是一个使用“颤振”技术的列表示例，帮助你更好地理解这个技术是如何工作的：

class MyList extends StatefulWidget {
  const MyList({Key? key}) : super(key: key);

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

class _MyListState extends State<MyList> {
  List<int> data = List.generate(1000, (index) => index);

  bool _canScroll = true;

  @override
  Widget build(BuildContext context) {
    return NotificationListener<OverscrollIndicatorNotification>(
      onNotification: (_) {
        setState(() {
          _canScroll = false;
        });

        return false;
      },
      child: NotificationListener<UserScrollNotification>(
        onNotification: (_) {
          setState(() {
            _canScroll = false;
          });

          return true;
        },
        child: SingleChildScrollView(
          physics: AlwaysScrollableScrollPhysics(),
          child: Column(
            children: [
              ListView.builder(
                shrinkWrap: true,
                physics: _canScroll
                    ? const NeverScrollableScrollPhysics()
                    : const AlwaysScrollableScrollPhysics(),
                itemBuilder: (context, index) => ListTile(title: Text(data[index].toString())),
                itemCount: data.length,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

上面的代码中，我们使用 a NotificationListener 来监听滚动事件，如果用户手动滑动列表，则禁用颤振，在用户停止滑动后，重新启动颤振。 这样做可以提供一个无缝的用户体验，配合灵敏的触屏和“颤振”技术，用户可以非常迅速地滑动到自己需要的内容。