Flutter之实现顶部导航栏颜色渐变

首先看效果

 

 

一、用到的组件及作用

Stack（实现堆叠效果）、MediaQuery（移除状态栏顶部内填充）、NotificationListener（监听滑动）、Opacity（透明度渐变控件）

二、实现

        1、首先因为appbar是盖在内容上的，所以根布局就是Stack布局

        2、因为要移除内容的padding实现侵入式效果，所以需要使用

  MediaQuery.removePadding

且设置removeTop为true

3、因为要监听滑动所以child组件为NotificationListener，并判断depth==0，因为这个控件是监听整个布局的，只有当等于第一个listview的时候才是我们滑动的监听，最后把值赋值给Opacity

 child: NotificationListener(
              onNotification: (scrollNotification) {
                if (scrollNotification is ScrollUpdateNotification &&
                    scrollNotification.depth == 0) {
                  //是滚动，且是列表滚动

                  _onScroll(scrollNotification.metrics.pixels);
                  return true;
                } else {
                  return false;
                }
              },

4、创建Opacity实现透明度渐变

三、以下是完整代码

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _HomePageState extends State {
  List _images = [
    "*/id_1986_202108131552359122.jpg",
    "*/202108121501016824.jpeg",
    "*/202108121501016824.jpeg",
    "*/202108121501011517.jpeg",
  ];
  double _appBarAlpha = 0;

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

  _onScroll(offset) {
    print("得到滚动值--->$offset");
    double alpha = offset / 100;
    if (alpha < 0) {
      alpha = 0;
    } else if (alpha > 1) {
      alpha = 1;
    }
    setState(() {
      _appBarAlpha = alpha;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          MediaQuery.removePadding(
            context: context,
            //移除顶部top
            removeTop: true,
            child: NotificationListener(
              onNotification: (scrollNotification) {
                if (scrollNotification is ScrollUpdateNotification &&
                    scrollNotification.depth == 0) {
                  //是滚动，且是列表滚动

                  _onScroll(scrollNotification.metrics.pixels);
                  return true;
                } else {
                  return false;
                }
              },
              child: ListView(
                children: [
                  Container(
                    height: 169,
                    child: Swiper(
                      itemCount: _images.length,
                      autoplay: true,
                      onTap: (index) {
                        print("object$index");
                      },
                      itemBuilder: (BuildContext context, int index) {
                        return Image.network(
                          _images[index],
                          fit: BoxFit.cover,
                        );
                      },
                      //指示器
                      pagination: SwiperPagination(),
                    ),
                  ),
                  Container(
                    height: 800,
                    child: ListTile(
                      title: Text("我是标题"),
                    ),
                  )
                ],
              ),
            ),
          ),
          Opacity(
            //控制透明度渐变控件
            opacity: _appBarAlpha,
            child: Container(
              height: 80,
              decoration: BoxDecoration(color: Colors.white),
              child: Center(
                child: Padding(
                  padding: EdgeInsets.only(top: 20),
                  child: Text("首页"),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}