card-swiper的使用及自定义渐变导航栏

添加card-swiper依赖

在pubspec.yaml中添加card-swiper

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  card_swiper : ^1.0.4

安装： 命令行输入下面的指令：

flutter packages get

代码

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

// 顶部导航栏根据滚动渐变的最大滚动距离
const APPBAR_SCROLL_OFFSET = 80;

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {
  // 轮播图图片列表
  final List _imageUrls = [
    'https://via.placeholder.com/350x150',
    'https://via.placeholder.com/350x150',
    'https://via.placeholder.com/350x150',
  ];

  // 顶部导航栏渐变透明图值
  double appBarAlpha = 0;

  // 界面滚动回调
  _onScroll(offset) {
    if (offset <= APPBAR_SCROLL_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(
      // Stack 堆叠，将navigationBar和ListView堆叠在一起，谁写在前面，谁就在底层。
      body: Stack(
        children: <Widget>[
          // 移除默认的padding
          MediaQuery.removePadding(
              // 移除的方向：顶部
              removeTop: true,
              // 上下文
              context: context,
              // 设置通知监听：监听谁就包裹谁
              child: NotificationListener(
                // 监听回调
                onNotification: (scrollNotification) {
                  // 过滤：通知是ScrollUpdateNotification类并且通知的深度来自第一层级，也就是ListView，只到这一级就可以了不再往下走。
                  if (scrollNotification is ScrollUpdateNotification &&
                      scrollNotification.depth == 0) {
                    //  从scrollNotification取出移动的像素，就是界面的偏移量
                    _onScroll(scrollNotification.metrics.pixels);
                  }
                  return false;
                },
                child: ListView(
                  children: <Widget>[
                    SizedBox(
                      height: 160.0,
                      child: Swiper(
                        // 遍历设置Swiper的Item
                        itemBuilder: (BuildContext context, int index) {
                          // BoxFit.fill 图片适应方式
                          return Image.network(_imageUrls[index],
                              fit: BoxFit.fill);
                        },
                        // item的数量(必填)
                        itemCount: _imageUrls.length,
                        // 是否自动播放
                        autoplay: true,
                        // 显示页码小圆点
                        pagination: const SwiperPagination(),
                      ),
                    ),
                    // 为了让例子界面可以滚动
                    const SizedBox(
                      height: 800,
                      child: ListTile(title: Text('haha')),
                    )
                  ],
                ),
              )),
          // Opacity包裹的组件可设置透明度
          Opacity(
            // 透明度(必填)
            opacity: appBarAlpha,
            child: Container(
              height: 80,
              decoration: const BoxDecoration(color: Colors.white),
              child: const Center(
                child: Padding(
                  padding: EdgeInsets.only(top: 20),
                  child: Text('首页'),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}