flutter滚动内容顶部appBar渐现

先看效果：

滚动出现appBar

实现：

这边主要是用到了NotificationListener这个widget，借助这个widget可以监听滚动的高度。appBar则使用自定义widget实现，给外层嵌套一个opacity组件，通过滚动监听高度变化然后改变appBar透明度即可。

NotificationListener(
      onNotification: (scrollNotification) {
      if (scrollNotification is ScrollUpdateNotification) {
           _onScroll(scrollNotification.metrics.pixels);
        }
}

判断条件里的ScrollUpdateNotification是指widget组件位置发生改变才会执行相应的逻辑

_onScroll函数方法实现：

_onScroll (offset) {
    double alpha = offset / APPBAE_SCROLL_OFFSET; // APPBAE_SCROLL_OFFSET为appBar高度
    if (alpha < 0) {
      alpha = 0;
    } else if (alpha > 1) {
      alpha = 1;
    }
    setState(() {
      alphaAppBar = alpha;
    })；
  }

完整示例代码：

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:flutter_swiper/flutter_swiper.dart';
const APPBAE_SCROLL_OFFSET = 100;

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List _imageUrl = [
    'https://wx1.sinaimg.cn/mw690/684e58a1gy1g56ma49gxtj22c02xvb2b.jpg',
    'https://wx2.sinaimg.cn/mw690/6a0576a9ly1g2d262s749j24s036okjs.jpg',
  ];
  double alphaAppBar = 1;

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

  _onScroll (offset) {
    double alpha = offset / APPBAE_SCROLL_OFFSET;
    if (alpha < 0) {
      alpha = 0;
    } else if (alpha > 1) {
      alpha = 1;
    }
    setState(() {
      alphaAppBar = alpha;
    });
    print(alphaAppBar);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfff2f2f2),
        body: Stack(
          children: <Widget>[
            MediaQuery.removePadding(
                removeTop: true,
                context: context,
                child: NotificationListener(
                    onNotification: (scrollNotification) {
                      if (scrollNotification is ScrollUpdateNotification) {
                        _onScroll(scrollNotification.metrics.pixels);
                      }
                      return false;
                    },
                    child: ListView(
                      children: <Widget>[
                        Container(
                            height: 260,
                            child: Swiper(
                                itemCount: _imageUrl.length,
                                autoplay: true,
                                itemBuilder: (BuildContext, int index) {
                                  return Image.network(
                                      _imageUrl[index],
                                      fit: BoxFit.fill,
                                  );
                                },
                                pagination: SwiperPagination(),
                            ),
                        ),
                        Container(
                            height: 800,
                        )
                      ],
                    )
                )
            ),
            Opacity(
                opacity: alphaAppBar,
                child: Container(
                    height: 80,
                    decoration: BoxDecoration(color: Colors.white),
                    child: Center(
                        child: Padding(
                            padding: EdgeInsets.only(top: 20),
                            child: Text('首页'),
                        ),
                    ),
                ),
              )
          ],
        )
    );
  }
}

关于更多使用NotificationListener的方法或例子，可以查看这里