17-flutter导航栏渐变效果

最新推荐文章于 2025-03-19 18:10:39 发布

原创最新推荐文章于 2025-03-19 18:10:39 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

Flutter 相关同时被 2 个专栏收录

39 篇文章

订阅专栏

flutter基础

20 篇文章

订阅专栏

本文介绍如何在Flutter应用中实现AppBar随着ListView滚动而逐渐变得透明的效果。通过监听ListView滚动通知，动态调整AppBar的透明度，使应用界面更加平滑过渡。

MediaQuery.removePadding 移除顶部的 padding

import 'package:flutter/material.dart';
// 导入swiper 组件
import 'package:flutter_swiper/flutter_swiper.dart';

const APPBAR_SCROLL_OFFSET = 200;
class HomePage extends StatefulWidget
{
    // 重写Create State 方法
    @override
    _HomePageState createState() => _HomePageState();

}


class _HomePageState extends State<HomePage>
{

    //定义一个AppBar 的透明度默认值
    double appBarAlpha = 0;

    List _imgUrls = [
      'http://pic1.nipic.com/2008-12-05/200812584425541_2.jpg',
      'http://pic18.nipic.com/20111129/4155754_234055006000_2.jpg',
      'http://b-ssl.duitang.com/uploads/item/201412/25/20141225204152_aYEc3.jpeg'
    ];

    @override  
    Widget build(BuildContext context) {
      return Scaffold(
        // MediaQuery.removePadding 移除顶部的 padding
        // 使用Stack 的作用就是让AppBar 叠加在上面
        body: Stack(
        children: <Widget>[
          MediaQuery.removePadding(
          removeTop: true,
          context: context,
          // 监听列表的滚动
          child: NotificationListener(
            
            // 滚动的回调
            onNotification: (scrollNotifation){
                // 判断ListView滚动的效果
                if (scrollNotifation is ScrollUpdateNotification && scrollNotifation.depth == 0){
                  // 滚动且是列表滚动的的的时候
                  double offset =  scrollNotifation.metrics.pixels;
                  print(offset);
                  double  alpha =  offset / APPBAR_SCROLL_OFFSET;
                  if(alpha < 0){
                    alpha =  0;
                  }else if (alpha > 0){
                    alpha =  1;
                  }
                  
                  setState(() {
                    appBarAlpha = alpha;
                  });
                  print(alpha);
                   
                }
              
            },  
            child: ListView(
            children: <Widget>[
                Column(
                children: <Widget>[
                  Container(
                    height: 160,
                    // 
                    child:Swiper(
                        itemCount: _imgUrls.length,
                        autoplay: true,
                        itemBuilder: (BuildContext context,int index){
                          // 获取图片
                          return Image.network(
                              _imgUrls[index],
                              // 适配方式
                              fit: BoxFit.fill,
                          );
                        },
                        // 添加一个页码指示器
                        pagination: SwiperPagination(),
                    ),
                  ),

                  Container(
                    height: 800,
                    child: ListTile(title: Text("Nice"),),
                  )

                ],
              ),
              ],

            ),
            ),
          ),
          // 创建AppBar
          Opacity(
            // 当列表滚动的时候 改变其透明度的值
            opacity: appBarAlpha,
            child: Container(
              height: 80,
              decoration: BoxDecoration(
                color: Colors.white
              ),
              child: Center(
                child: Padding(padding: EdgeInsets.only(top: 20),
                child: Text('首页'),),
                
              ),
            ),
          )



          ],
          
        )
      );
    }

}