美文网首页
Flutter ListView 中去除滑动波纹的实现

Flutter ListView 中去除滑动波纹的实现

作者: 埋桑 | 来源:发表于2020-11-13 11:34 被阅读0次

    使用过 ListView 的读者们应该了解到 ListView 的一个特性,即若 ListView 在滚动至顶部或底部后继续滚动,组件中将会出现一条带有默认主体颜色的波纹。在某些情况下,我们为了美观并不希望显示过度滚动波纹,这个时候我们应该怎么操作呢?

    💻 方法一 配置一个 ScrollConfiguration

    第一步 定义一个 ScrollBehavior

    class _OverScrollBehavior extends ScrollBehavior {
      @override
      Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
        if (getPlatform(context) == TargetPlatform.android || getPlatform(context) == TargetPlatform.fuchsia) {
          return GlowingOverscrollIndicator(
            child: child,
            showLeading: false,
            showTrailing: false,
            axisDirection: axisDirection,
            color: Theme.of(context).accentColor,
          );
        } else {
          return child;
        }
      }
    }
    

    第二步 将 ScrollBehavior 配置到 ScrollConfiguration 中

    class Demo extends StatelessWidght {
      @override
      Widget build(BuildContext context) {
        return ScrollConfiguration(
          behavior: _OverScrollBehavior(),
          child: ListView(
            ...
          ),
        );
      }
    }
    

    是不是觉得如果每个 ListView 都需要单独封装的话未免也太麻烦了点?
    没关系,已经帮你们想到了!作者已经帮你们封装好了现成的仓库,我们只需要直接调用就行!

    💻 方法二 直接使用现成第三方库 noripple_overscroll(推荐)

    第一步 进入 pub.dev 查看依赖的最新版本

    进入依赖的仓库主页后,检查到最新的依赖版本。

    截止至文章发布,版本为 0.0.2

    第二步 安装依赖

    dependencies:
      noripple_overscroll: ^0.0.2    # 具体版本因依赖版本发布而异,具体参见 Pub 仓库
    

    第三步 引入依赖并使用

    这个依赖使用非常简单,我们只需要将需要取消显示波纹的ListView传入即可。

    class _NorippleDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return NoRippleOverScroll(  // 调用 NoRippleOverScroll
          child: ListView(          // 传入 ListView
            ...
          ),
        );
      }
    }
    

    做到这里,波纹已经被取消了。

    相关文章

      网友评论

          本文标题:Flutter ListView 中去除滑动波纹的实现

          本文链接:https://www.haomeiwen.com/subject/rpevbktx.html