flutter监听滚动以及去除padding

flutter监听滚动以及去除padding

需求：需要将搜索框固定在页面上，然后监听下拉的距离，搜索框由透明完全显示

1.移除padding：

MediaQuery.removePadding(
	removeTop: true, // 这个参数是必须的 removeBottom removeLeft removeRight
	context: context,
	child: ...
)

2.监听列表滚动

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
// 滚动最大距离 100的时候完全显示
const APPBAR_MAX_OFFSET = 100;
class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

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

class _HomeState extends State<Home> {
  // 定义透明度
  double appBarAlpha = 0;
  List<Map> imglist = [
    {
      "url":
          "https://i0.hdslb.com/bfs/archive/0ba86ca1852a9654472bfa5e71f5d6b8c3d63477.jpg@1100w_484h_1c_100q.jpg"
    },
    {
      "url":
          "https://i0.hdslb.com/bfs/archive/278e24a0da71e8b266a6efebeb08c93f66b17879.jpg@1100w_484h_1c_100q.jpg"
    },
    {
      "url":
          "https://i0.hdslb.com/bfs/archive/cad8287004fd3be609f3c2f13ff43c2697422561.png@1100w_484h_1c_100q.png"
    },
    {
      "url":
          "https://i0.hdslb.com/bfs/archive/4a401a552cdeb98438b2ca2d1443513379cb51b2.jpg@1100w_484h_1c_100q.jpg"
    }
  ];
  // 列表滚动 参数是距离
  _onScroll(offset) {
    double alpha = offset / APPBAR_MAX_OFFSET;
    if(alpha < 0 ){
      alpha = 0;
    }else if(alpha > 1){
      alpha = 1;
    }
    setState(() {
      appBarAlpha = alpha;
    });
    print(alpha);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      
      body:Stack( // Stack 后面会把前面的组件覆盖
        children: <Widget>[
          // MediaQuery.removePadding 为了移除padding
           MediaQuery.removePadding(
            removeTop: true, // 这个移除padding的关键参数 告诉 flutter 移除的那一边
            context: context,
            // 监听列表滚动 需要调用 NotificationListener 函数
            child: NotificationListener(
              onNotification: (scrollNotification) {
                // 判断如果没滚动 就不执行函数
                // 因为下面的轮播图出影响到上面的监听 所以在child里面的第 0 个元素滚动的时候才触发  scrollNotification.depth
                if (scrollNotification is ScrollNotification &&
                    scrollNotification.depth == 0) {
                  // 列表滚动的时候 scrollNotification.metrics.pixels 滚动距离
                  _onScroll(scrollNotification.metrics.pixels);
                }
              },
              child: ListView(
                children: <Widget>[
                  Container(
                    height: 150,
                    child: Swiper(
                      loop: true,
                      autoplay: true,
                      pagination: new SwiperPagination(), // 控制分页器的
                      control: new SwiperControl(), // 控制左右箭头的
                      itemCount: this.imglist.length,
                      itemBuilder: (BuildContext context, int index) {
                        return Image.network(
                          this.imglist[index]['url'],
                          fit: BoxFit.fill,
                        );
                      },
                    ),
                  ),
                  Container(
                    height: 800,
                    child: ListTile(
                      title: Text("123131"),
                      subtitle: Text("iusahfkashfkjsab"),
                    ),
                  )
                ],
              ),
            )),
            // 是否透明
            Opacity(
              opacity: this.appBarAlpha,
              child: Container(
                height: 70,
                decoration: BoxDecoration(
                  color: Colors.white
                ),
                child: Center(
                  child: Padding(
                    padding: EdgeInsets.only(top: 20),
                    child: Text("首页"),
                  ),
                ),
              ),
            )
        ],
      )
    );
  }
}