Flutter之自定义AppBar并实现滑动渐变

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
//滚动最大距离
const APPBAR_SCROLL_OFFSET = 100;
class HomePage extends StatefulWidget {

  @override
  _TabNavigatorState createState() =>_TabNavigatorState();
}

class _TabNavigatorState extends State<HomePage> {
  List _imageUrl =[
    'https://dimg04.c-ctrip.com/images/zg0o180000014yl20DEA4.jpg',
    'https://dimg04.c-ctrip.com/images/zg0f180000014vrut370F.jpg',
    'https://dimg04.c-ctrip.com/images/zg0n18000001528jhD6B2.jpg'];
  double appBarAlpha = 0;
  __onScroll(offset){
    double alpha = offset/APPBAR_SCROLL_OFFSET;
    if(alpha<0){
      alpha = 0;
    }else if(alpha>1){
      alpha = 1;
    }
    setState(() {
      appBarAlpha = alpha;
    });

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          MediaQuery.removePadding(context: context,
              removeTop: true,
              //监听列表的滚动
              child: NotificationListener(
                //监听滚动后要调用的方法
                // ignore: missing_return
                onNotification: (scrollNotification){
                  //只有当是更新状态下和是第0个child的时候才会调用
                  if(scrollNotification is ScrollUpdateNotification &&scrollNotification.depth==0){
                    __onScroll(scrollNotification.metrics.pixels);
                  }
                },
                child: ListView(
                  children: <Widget>[
                    Container(
                      height: 110,
                      child: Swiper(
                        //item的数量
                        itemCount: _imageUrl.length,
                        //自动播放
                        autoplay: true,
                        itemBuilder: (BuildContext context,int index){
                          return Image.network(_imageUrl[index],fit: BoxFit.fill,);
                        },
                        //banner上添加指示器
                        pagination: SwiperPagination(),
                      ),
                    ),
                    Container(
                      height: 800,
                      child: ListTile(title: Text("哈哈"),),
                    )
                  ],
                ),
              )
          ),
          //通过Opacity的透明度来控制appBar的显示与隐藏
          // opacity:透明度,0.0 到 1.0,0.0表示完全透明,1.0表示完全不透明
          Opacity(
            opacity: appBarAlpha,
            child: Container(
              height: 80,
              decoration: BoxDecoration(color: Colors.white,),
              child: Center(
                child:Padding(
                  padding: EdgeInsets.only(top: 20),
                  child: Text("首页"),
                ),
              ),
            ),
          )
        ],
      )
    );
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }
}

发布了66 篇原创文章 · 获赞 36 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/u013600907/article/details/101456290
今日推荐