美文网首页
flutter AppBar滚动渐变

flutter AppBar滚动渐变

作者: 冰点雨 | 来源:发表于2020-03-06 12:32 被阅读0次

效果图(图不太好,凑合看吧)


效果图.gif

代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutterapp/utils/log_util.dart';


const APPBAR_SCROLL_OFFSET = 100; //设置滑动变化的偏移量
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  List _imageUrls = [
    'http://www.yijuzg.com/img/ggimg/096fe739-2d46-4684-9b9f-99fdb801f691-20190228051421.jpg',
    'http://www.yijuzg.com/img/ggimg/9ea4e197-aa5e-4fef-aaa2-93392eb1162e-20190110092133.jpg',
    'http://www.yijuzg.com/img/ggimg/90251d46-99ac-4841-ba91-f5a10def7c53-20190110101218.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;
    });
//    print(appBarAlpha);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          MediaQuery.removePadding(//移除ListView得padding
            removeTop: true,//移除Top
              context: context,
              //实现对列表得监听  --  接收 onNotification 得回调,每次滚动得时候都会回调这个函数
              child: NotificationListener(
                // ignore: missing_return
                onNotification:(scrollNotification) {
                  if (scrollNotification is ScrollUpdateNotification &&
                      scrollNotification.depth == 0) {//1、只监测ListView的滚动(深度设为0),2、监测滚动的时候(ScrollUpdateNotification)
                    _onScroll(scrollNotification.metrics.pixels);
                  }
                },
                  child: mainWidget()
              )
          ),
          Opacity(///改变透明度都可以使用 Opacity 将其包裹
            opacity: appBarAlpha,
            child: topWidget()//顶部导航栏 也可以是自定义组件
          )
        ],
      ),
    );
  }

  Widget topWidget(){
    return Container(
      height: 80,
      decoration: BoxDecoration(
          border:Border(
              bottom:BorderSide(
                  width: 1,
                  color: Color(0xffe5e5e5))
          )
      ),
      child: Center(
        child: Padding(
          padding: EdgeInsets.only(top: 20),
          child: Text(
            '首页',
            style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold
            ),
          ),
        ),
      ),
    );
  }

  Widget mainWidget(){
    return ListView(//为了实现渐变
      children: <Widget>[
        //轮播图
        _homeSwiperWidget(),
        Container(
          height: 800,
          child: ListTile(
            title: Text('哈哈'),
          ),
        )
      ],
    );
  }

  /// 轮播图
  Widget _homeSwiperWidget(){
    return Container(
      height: 160,
      child: Swiper(
        itemCount: _imageUrls.length,
        autoplay: true,//自动播放
        pagination: SwiperPagination(),//轮播图小点
        itemBuilder: (BuildContext context,int index){
          return Image.network(
            _imageUrls[index],
            fit: BoxFit.fill,
          );
        },
        onTap: (index){
          LogUtil.log("点击了第:$index个");
        },
      ),
    );
  }
}

相关文章

网友评论

      本文标题:flutter AppBar滚动渐变

      本文链接:https://www.haomeiwen.com/subject/lddbrhtx.html