Flutter学习第八天：轮播图Banner，自定义AppBar实现滚动渐变？

1.轮播图的实现

1.导入依赖包

flutter_swiper: ^1.1.6

Flutter下载地址插件地址：Flutter插件下载地址
在里面搜索flutter_swing就可以获取你需要的Flutter的插件

2.插入导入地址

步骤如下：先点击pubspec.yaml地址--->然后把依赖包添加到dependencies里面--->然后点击pub get

3.使用轮播图插件

具体细节就不在这里说明了，代码里面对于主要代码功能有解析。
分享一个用于上传网络图片的网站：ImgBB平台。
个人感觉使用挺方便，最主要是免费，还有很多其他的功能，你可以自己去学习学习。

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

void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  //轮播图图片地址
  List _imageurls=[
    'https://i.ibb.co/ym2R1R7/child-river-dreams-127495-1920x1080.jpg',
    'https://i.ibb.co/FBp1LW8/girl-umbrella-rain-151317-1280x720.jpg',
    'https://i.ibb.co/Yk8C22T/wallhaven-2el5zg.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children:<Widget> [
            Container(
              height: 220,
              //使用Swiper轮播图插件
              child: Swiper(
                itemCount: _imageurls.length,     //轮播图的数量
                autoplay: true,                  //轮播图滚动
                itemBuilder: (BuildContext context,int index){
                  //Image.network方法是导入网络图片
                  return Image.network(
                    _imageurls[index],  
                    fit: BoxFit.fill,   
                  );
                },
                pagination: SwiperPagination(),   //轮播图的小圆点
              ),
            )
          ],
        ),
      ),
    );
  }
}

效果如下：

2.自定义AppBar实现滚动渐变

1.部分代码解析

用来去除顶部状态栏

MediaQuery.removePadding(
    removeTop: true,  
)

用来检测滚动距离

NotificationListener(
  // ignore: missing_return
  onNotification: (scrollNotification){
    if(scrollNotification is ScrollUpdateNotification &&
    scrollNotification.depth ==0){
      _onScroll(scrollNotification.metrics.pixels);
    }
  },
)

一个透明度组件，用来控制透明度

Opacity(
    opacity: appBarAlpha,
    child: Container(
      height: 60,
      decoration: BoxDecoration(color: Colors.white),
      child: Center(
        child: Padding(padding: EdgeInsets.only(top: 20),
          child: Text('首页'),),
      ),
    ),
  )

2.整体代码

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

const APPBAR_SCROLL_OFFSET=150;

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List _imageurls=[
    'https://i.ibb.co/ym2R1R7/child-river-dreams-127495-1920x1080.jpg',
    'https://i.ibb.co/FBp1LW8/girl-umbrella-rain-151317-1280x720.jpg',
    'https://i.ibb.co/Yk8C22T/wallhaven-2el5zg.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;
    });

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
          children:<Widget> [
            MediaQuery.removePadding(
              removeTop: true,
              context: context,
              child: NotificationListener(
                // ignore: missing_return
                onNotification: (scrollNotification){
                  if(scrollNotification is ScrollUpdateNotification &&
                  scrollNotification.depth ==0){
                    _onScroll(scrollNotification.metrics.pixels);
                  }
                },
                child: ListView(
                  children: <Widget>[
                    Container(
                      height: 220,
                      child: Swiper(
                        itemCount: _imageurls.length,
                        autoplay: true,
                        itemBuilder: (BuildContext context,int index){
                          return Image.network(
                            _imageurls[index],
                            fit: BoxFit.fill,
                          );
                        },
                        pagination: SwiperPagination(),
                      ),
                    ),
                    Container(
                      height: 800,
                      child: ListTile(
                        title: Text('Hello World'),
                      ),
                    )
                  ],
                ),
              ),
            ),
            Opacity(
              opacity: appBarAlpha,
              child: Container(
                height: 60,
                decoration: BoxDecoration(color: Colors.white),
                child: Center(
                  child: Padding(padding: EdgeInsets.only(top: 20),
                    child: Text('首页'),),
                ),
              ),
            )
          ],
        )
    );
  }
}

实现功能效果：