Flutter CustomScrollView实现的一个经典滑动折叠头部图片的效果

原创

早起的年轻人 2021-06-01 16:01:15 ©著作权

©著作权归作者所有：来自51CTO博客作者早起的年轻人的原创作品，请联系作者获取转载授权，否则将追究法律责任

题记

—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

Flutter是谷歌推出的最新的移动开发框架。

Flutter NestedScrollView 滑动组件是用来处理复杂情况下的滑动应用场景，如向上滑动视图时，要折叠隐藏一部分内容，这时候就需要使用到 NestedScrollView 与 SliverAppBar 的结合使用。

CustomScrollView 用来处理更为复杂的布局结合 SliverAppBar，SliverList和SliverGrid SliverPadding SliverToBoxAdapter SliverPersistentHeader, SliverFillRemaining，SliverFillViewport等来使用

在本节中是使用 CustomScrollView 结合 SliverAppBar 与
SliverList实现的一个向上滑动折叠头部图片的经典布局效果

【x1】微信公众号的每日提醒随时随记每日积累随心而过

【x2】各种系列的视频教程免费开源关注你不会迷路

【x3】系列文章百万 Demo 随时复制粘贴使用

【x4】本文章对应的讲解视频在这里

本 Demo 实现的最终效果如下：

Flutter CustomScrollView实现的一个经典滑动折叠头部图片的效果_Flutter学习

一般页面的主体使用 Scaffold ，所以在这里也是使用了 Scaffold 来架构页面，如下代码清单1-1所示：

///代码清单 1-1 
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CustomScrollDemoPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ScrollHomePageState();
  }
}

class _ScrollHomePageState extends State{
  
  ///图片地址
  String imageUrl =
      "http://file02.16sucai.com/d/file/2015/0408/779334da99e40adb587d0ba715eca102.jpg";
  
  @override
  Widget build(BuildContext context) {
    ///页面主体脚手架
    return Scaffold(
        /// 处理滑动
        body: CustomScrollView(
      slivers: <Widget>[
        ///顶部的标题图片部分
        buildSliverAppBar(),
        ///底部的列表部分
        buildSliverList()
      ],
    ));
  }
}
  ... ... 
}

在这里使用了CustomScrollView结合了SliverAppBar 与 SliverList 实现的整体效果，其中 buildSliverAppBar 方法是用来构建 SliverAppBar的，如下代码清单 1-2所示：

///代码清单1-2
SliverAppBar buildSliverAppBar() {
  return SliverAppBar(
      backgroundColor: Colors.pink,
      pinned: true,
      snap: false,
      floating: true,
      leading: Icon(Icons.home),
      actions: <Widget>[Icon(Icons.menu)],
      title: Text("这里是标题"),
      expandedHeight: 180,
      flexibleSpace: FlexibleSpaceBar(
        background: Row(
          children: <Widget>[
            Expanded(
              child: Image.network(
                imageUrl,
                fit: BoxFit.cover,
              ),
            )
          ],
        ),
      ),
    );
}

buildSliverList方法是用来构建列表组件 SliverList，如下代码清单 1-3 所示：

///代码清单1-3
SliverList buildSliverList() {
  return SliverList(
    ///懒加载代理
    delegate: SliverChildBuilderDelegate((BuildContext context, num index) {
      ///子Item的布局 
      return Container(
        height: 44,
        margin: EdgeInsets.only(bottom: 10),
        child: Text("item- $index"),
      );
    }, childCount: 100),//子Item的个数
  );
}