美文网首页
Flutter-滚动类型组件隐藏水波纹

Flutter-滚动类型组件隐藏水波纹

作者: 为什么划船不靠桨 | 来源:发表于2022-11-21 21:06 被阅读0次

    因为项目需要,需要将滚动类型组件的水波纹隐藏,有两种方法。

    方式一、设置滚动类型组件physics属性
    physics:BouncingScrollPhysics(),
    

    但是这种方式会在滚动视图滚动到边界的时候产生弹簧效果,也就是iOS原生各种滚动视图默认有的阻尼动画效果,如果不想在去除水波纹的时候附带添加上这种阻尼效果,可以使用第二种方式。

    方式二、
    import 'package:flutter/material.dart';
    
    /// 隐藏水波纹配置
    class NoShadowScrollBehavior extends ScrollBehavior {
      @override
      Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
        switch (getPlatform(context)) {
          case TargetPlatform.iOS:
          case TargetPlatform.macOS:
            return child;
          case TargetPlatform.android:
            return GlowingOverscrollIndicator(
              showLeading: false,
              showTrailing: false,
              axisDirection: axisDirection,
              color: Theme.of(context).accentColor,
              child: child,
            );
          case TargetPlatform.fuchsia:
          case TargetPlatform.linux:
          case TargetPlatform.windows:
            return GlowingOverscrollIndicator(
              //不显示头部水波纹
              showLeading: false,
              //不显示尾部水波纹
              showTrailing: false,
              axisDirection: axisDirection,
              color: Theme.of(context).accentColor,
              child: child,
            );
        }
      }
    }
    

    使用的时候需要将滚动的组件作为ScrollConfiguration的子组件,并设置behavior属性为刚刚创建的NoShadowScrollBehavior类型。

    ScrollConfiguration(
        behavior: NoShadowScrollBehavior(),
        child: SingleChildScrollView(
        ),
      )
    

    这种方式对所有继承自ScrollViewwidget都有效,例如ListViewGridViewCustomScrollViewBoxScrollView)。

    相关文章

      网友评论

          本文标题:Flutter-滚动类型组件隐藏水波纹

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