header-bg.jpg
Flutter 实战 App 项目总结
发表于 2020-05-16 13:23
|
分类于 学海无涯
|
评论次数 0
|
阅读次数 41

自定义滚动组件水波纹

Material 的滚动组件如 SingleChildScrollView 在滚动至顶部或底部时会显示水波纹效果,若需要关闭水波纹,则使用如下的类:

import 'package:flutter/material.dart';

class ExtendedScrollBehavior extends ScrollBehavior {
  final bool showLeading;
  final bool showTrailing;

  ExtendedScrollBehavior({this.showLeading = false, this.showTrailing = false});

  
  Widget buildViewportChrome(
      BuildContext context, Widget child, AxisDirection axisDirection) {
    switch (getPlatform(context)) {
      case TargetPlatform.iOS:
        return child;
      case TargetPlatform.android:
      case TargetPlatform.windows:
      case TargetPlatform.linux:
      case TargetPlatform.macOS:
      case TargetPlatform.fuchsia:
        return GlowingOverscrollIndicator(
          child: child,
          // 头部水波纹
          showLeading: showLeading,
          // 尾部水波纹
          showTrailing: showTrailing,
          axisDirection: axisDirection,
          color: Theme.of(context).hintColor,
        );
    }

    return null;
  }
}

ExtendedScrollBehavior 构造函数有两个可选参数:

以上两个参数默认值都是 false,即不显示水波纹。

调用方式很简单,例如,只显示顶部水波纹:

ScrollConfiguration(
  behavior: ExtendedScrollBehavior(showLeading: true),
  child: SingleChildScrollView(),
)

页面 POP

NavigatorState.pushNamed 后再调用 NavigatorState.pop 返回上一页时,两个页面都会发生 build,而普通的 NavigatorState.push 后再调用 NavigatorState.pop 返回上一页并不会导致 build

发布评论
还没有评论,快来抢沙发吧!