Flutter 透明渐变 AppBar

最近要用 Flutter 重构一个 Native 页面,效果如下:

在这里插入图片描述
随着页面滑动,圆形按钮逐渐消失,返回按钮逐渐呈现,同时AppBar的透明度在整个过程中,是随着滑动距离线性变化的,而按钮的变化分为两段:圆形按钮逐渐消失,返回按钮逐渐呈现,整个过程可逆。

接下来介绍实现过程。

1.整体结构设计

通过观察可知,listView 可以在 AppBar 底部滑动,常规的 Scaffold widget 无法满足这个需求,而 Stack widget 可以实现组件的叠加,在这里通过 Stack 作为页面的 root widget。通过监听scrollView 的滑动距离,实时计算 appBar 和 按钮 的透明度。

///首先声明 全局变量
  AppBarWidget appBar;
  ScrollController scrollController; //scrollView的控制器
  PositionedBtnWidget roundLeftBtn; //圆形返回按钮
  PositionedBtnWidget rectLeftBtn;  //方形返回按钮

在初始化方法里,给全局变量赋值:

 @override
  void initState() {
    super.initState();
    appBar = AppBarWidget();
    scrollController = ScrollController();
    roundLeftBtn = PositionedBtnWidget();
    rectLeftBtn = PositionedBtnWidget();
  }

整体UI结构使用 Scaffold作为主框架,body部分则是 Stack,底部 TabBar使用 Scaffold 自带属性自定义搭建。为了适配 iPhoneX 底部,需要计算 安全区域高度。MediaQuery.of(context).padding.bottom;CustomScrollView 的controller 继承自 ChangeNotifier,可监听其位置变化。

///示意代码
Scaffold(
        body: Stack(
          children: <Widget>[
            ///监听滚动
            NotificationListener(
              onNotification: (notification) {
                if (notification is ScrollUpdateNotification &&
                    notification.depth == 0) {
                  ///滑动通知
           scrollViewDidScrolled(notification.metrics.pixels);
                }
                ///通知不再上传
                return true;
              },
              child: CustomScrollView(),
            appBar,
            rectLeftBtn,
            roundLeftBtn,
          ],
        ),
        bottomNavigationBar: Container(
            color: Colors.orange,
            height: bottomBarHeight,
            child: Center(
              child: Text('bottom bar'),
            )));
2.其他部件的搭建

因为要实现透明度效果,这里使用 Opacity widegt 来实现。控制 opacity 透明度的值,可实现透明度的变化。注意:在这里发现,Stack内的两个组件,如果发生重叠,位于顶部的widget最先响应点击事件。

///示例
Opacity(
      opacity: opacity,
      child: Container(
        height: appBarHeight,
        child: AppBar(
          title: Text('app bar'),
          backgroundColor: Colors.deepOrange,
        ),
      ),
    );

在 Stack 内部,变动部件位置需要用到 Positioned widegt, 点击事件通过 IconButton 来实现

Positioned(
      top: btnTop,
      right: right,
      left: left,
      child: Opacity(
        opacity: btnOpacity,
        child: IconButton(
          icon: Image.asset(image),
          onPressed: () {
            if (widget != null && widget.actionFunction != null) {
              widget.actionFunction();
            }
          },
        ),
      ),
    );
3.透明度计算

通过监听 scrollview的滑动距离,计算各个部件的透明度。
在这里 把完全透明到不透明 需要滑动的距离定为 80(单位逻辑像素 logical pixels
而按钮 的变化分为两段,每段滑动距离为整体的一半,也就是40逻辑像素。
具体计算方式如下:

 double maxOffset = 80.0;

  scrollViewDidScrolled(double offSet) {
    //print('scroll offset ' + offSet.toString());

    ///appbar 透明度
    double appBarOpacity = offSet / maxOffset;
    double halfPace = maxOffset / 2.0;

    ///圆形按钮透明度
    double roundOpacity = (halfPace - offSet) / halfPace;

    ///方形按钮透明度
    double rectOpacity = (offSet - halfPace) / halfPace;

    if (appBarOpacity < 0) {
      appBarOpacity = 0.0;
    } else if (appBarOpacity > 1) {
      appBarOpacity = 1.0;
    }

    if (roundOpacity < 0) {
      roundOpacity = 0.0;
    } else if (roundOpacity > 1) {
      roundOpacity = 1;
    }

    if (rectOpacity < 0) {
      rectOpacity = 0.0;
    } else if (rectOpacity > 1) {
      rectOpacity = 1.0;
    }
    //print('roundOpacity $roundOpacity rectOpacity $rectOpacity');

    ///更新透明度
    if (appBar != null && appBar.updateAppBarOpacity != null) {
      appBar.updateAppBarOpacity(appBarOpacity);
    }

    if (roundLeftBtn != null && roundLeftBtn.updateOpacity != null) {
      roundLeftBtn.updateOpacity(roundOpacity);
    }
    if (rectLeftBtn != null && rectLeftBtn.updateOpacity != null) {
      rectLeftBtn.updateOpacity(rectOpacity);
    }
  }

代码地址
Demo

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值