Flutter 去除 Android 端滚动视图到顶、底的波纹效

2020-06-12  本文已影响0人  Zig_Zag

Flutter 在 Android 端的滚动视图,比如 SingleChildScrollView 和 ListView 等,如果不加处理,在拉到顶或者拉到底的时候,是有一个带有 accentColor 颜色的水波纹效果的,同时 iOS 端是一个软性回弹效果,如果想在 iPhone 上保留 iOS 的效果,但是 Android 端去除这个效果,可以按以下操作:

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:
      case TargetPlatform.fuchsia:
      case TargetPlatform.linux:
      case TargetPlatform.windows:
        return GlowingOverscrollIndicator(
          child: child,
          //不显示头部水波纹
          showLeading: false,
          //不显示尾部水波纹
          showTrailing: false,
          axisDirection: axisDirection,
          color: Theme.of(context).accentColor,
        );
    }
    return null;
  }
}

自定义一个 NoShadowScrollBehavior ,代码很简单,利用 switch 的穿透,在苹果设备上原样返回子 Widget ,而其他平台,包括 Android ,将 showLeading 和 showTrailing 设置为 false ,然后用 ScrollConfiguration 包裹 ScrollView 或者 ListView,在 behavior 里将上方的 NoShadowScrollBehavior 赋值即可:

~~~
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("title"),
      ),
      body: ScrollConfiguration(
        behavior: NoShadowScrollBehavior(),
        child: SingleChildScrollView(
          child: Container(
            //主视图
          ),
        ),
      ),
    );
  }
~~~

以上。

上一篇下一篇

猜你喜欢

热点阅读