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

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


Flutter是谷歌推出的最新的移动开发框架。
Flutter NestedScrollView 滑动组件是用来处理复杂情况下的滑动应用场景,如向上滑动视图时,要折叠隐藏一部分内容,这时候就需要使用到 NestedScrollView 与 SliverAppBar 的结合使用。

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

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


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

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

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

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


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

在这里插入图片描述
一般页面的主体使用 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的个数
  );
}

完毕

当然 以小编的性格,是必须有源码的:本文章的全部代码在这里

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:设计师小姐姐 返回首页