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

2022-11-21  本文已影响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)。

上一篇下一篇

猜你喜欢

热点阅读