Scaffold的drawer， MediaQuery.removePadding()，Stack()，NotificationListener<ScrollNotification>()，Li...

这是本文涉及的widgets：

Scaffold(drawer)
MediaQuery.removePadding()
Stack()
NotificationListener<ScrollNotification>()
ListView()
Opacity()
NetworkImage和Image.network区别？？

以上这些个widgets将通过以下进行认识,代码中有明确注释，如有未涉及的请留言，会及时补充，相互学习。

以下代码实现的功能是 （代码可以自己建类直接运行）

1. 下拉过程自定义的appbar实现透明度的渐变，
2. 侧边栏

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

const APPBAR_SCROLL_OFFSET = 100;


final _imagesUrl = [
    'https://iph.href.lu/750x340?text=1&fg=f44336&bg=ffd966',
    'https://iph.href.lu/750x340?text=2&fg=f44336&bg=ffd966',
    'https://iph.href.lu/750x340?text=3&fg=f44336&bg=ffd966'
  ];
  double appBarAlpha = 0;
  _onSroll(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(
        drawer: Drawer( // 侧边栏，通常配合ListView使用
            child: ListView( // 列表
          children: const <Widget>[
            UserAccountsDrawerHeader( // 侧边栏头部信息，还有个DrawerHeader和它用途差不多，选适合的即可
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: NetworkImage('https://iph.href.lu/750x340?fg=f44336&bg=ffd966'),
                      // NetworkImage和Image.network区别？？？
                      // Image.network只是Image小部件的一个构造函数，调用的NetworkImage去实现图片的填充
                      fit: BoxFit.cover)),

              currentAccountPicture: CircleAvatar(  // 头像
                backgroundImage: NetworkImage('https://iph.href.lu/750x340?text=tou&fg=f44336&bg=ffd966'),
              ),
              accountName: Text(// accountName用户名
                'gagaga',
                style: TextStyle(color: Colors.blue),
              ),
              accountEmail: Text(  // accountEmail 邮箱
                '541245636@qq.com',
                style: TextStyle(color: Colors.blue),
              ),
              // onDetailsPressed: () {   
              //   debugPrint("点击accountName/accountEmail时触发回调");
              // },
              // otherAccountsPictures: const <Widget>[
              //   CircleAvatar(
              //     backgroundImage: NetworkImage(
              //         'otherAccountsPictures用来设置当前用户其他账号的头像（3个最多）.png'),
              //   )
              // ],
            ),
            ListTile(  //以下列表123
              leading: Icon(Icons.camera_alt),
              title: Text('嘀一'),
            ),
            ListTile(
              leading: Icon(Icons.camera_alt),
              title: Text('嘀er'),
            ),
            ListTile(
              leading: Icon(Icons.camera_alt),
              title: Text('嘀san'),
            ),
          ],
        )),
        body: Stack( //分层靠后的widget层级在上边，类似于css的z-index作用吧
          children: <Widget>[
            MediaQuery.removePadding( //配合其参数removeTop去除头部的padding
                removeTop: true,
                context: context,
                child: NotificationListener( // 监听列表滚动
                  onNotification: (scrollNotification) {
                    if (scrollNotification is ScrollUpdateNotification &&
                        scrollNotification.depth == 0) { // 判断是否是滚动，并且是NotificationListener下的第一个widget，此处指的是ListView
                      // 滚动且是列表滚动
                      _onSroll(scrollNotification.metrics.pixels);
                    }
                    return false;
                  },
                  child: ListView(
                    children: <Widget>[
                      SizedBox(
                        height: 169,
                        child: Swiper(// 使用的插件轮播
                          itemCount: _imagesUrl.length,
                          autoplay: true,
                          itemBuilder: (BuildContext context, int index) {
                            return Image.network(_imagesUrl[index],
                                fit: BoxFit.fill);
                          },
                          pagination: const SwiperPagination(),
                        ),
                      ),
                      const SizedBox(
                          height: 800,
                          child: Center(
                            child: Text('list'),
                          ))
                    ],
                  ),
                )),
            Opacity(  // 某个widget'要实现实现透明度，将其套在外边即可
                opacity: appBarAlpha,
                child: Container(
                  height: 80,
                  decoration: const BoxDecoration(color: Colors.white),
                  child: const Center(
                      child: Padding(
                    padding: EdgeInsets.only(top: 20),
                    child: Text('首页'),
                  )),
                ))
          ],
        ));
  }

效果图如下：

drawer.png	opacity.png