Flutter CustomScrollView的巧妙使用

站长

2023年09月21日 06:53 · 阅读数 30

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

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

Flutter中常用的滑动布局 ScrollView 有 SingleChildScrollView、NestedScrollView、CustomScrollView。

SingleChildScrollView 用来处理简单可滑动的页面布局视图，如一般的数据详情页面，当内容足够多时，一屏显示不下时，就需要滑动处理。

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

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

如一个详情页面中即需要 GridView 来实现二维宫格效果，也需要 ListView 列表效果，如下图所示的图片效果，当使用 CustomScrollView 结合 SliverList 和SliverGrid 就可轻松实现，当然结合一下 SliverAppBar 也能实现折叠效果的头部布局，所以说 CustomScrollView 很强大。

在实际应用开发中，如果只是一个简单的适配页面滑动，建议码农使用 SingleChildScrollView 就可以。

本文章的主要定位是实现的一个 Demo ，对 Widget 的属性有基本说明，未做详细阐述

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

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

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

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

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

Flutter CustomScrollView的巧妙使用

首先来看页面的主体，当然小编使用了 Scaffold 脚手架组件来构建页面主体（Scaffold文章讲解|Scaffold视频讲解），代码如下：

class CustomScrollHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ScrollHomePageState();
  }
}

class ScrollHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: Text(" 配制"),
      ),
      ///SingleChildScrollView
      ///NestedScrollView
      /// 处理滑动
      body: buildCustomScrollView(),
    );
  }
 ... ...
 }

buildCustomScrollView 用来构建 CustomScrollView （视频讲解在这里）,其属性slivers用来配置Sliver家族的Widget，代码如下：

CustomScrollView buildCustomScrollView() {
   return CustomScrollView(
     ///反弹效果
     physics: BouncingScrollPhysics(),
     ///Sliver 家族的 Widget
     slivers: <Widget>[
       ///复杂的标题
       buildSliverAppBar(),
       ///间距
       SliverPadding(
         padding: EdgeInsets.all(5),
       ),

       ///九宫格
       buildSliverGrid(),
       ///间距
       SliverPadding(
         padding: EdgeInsets.all(5),
       ),
       ///列表
       buildSliverFixedExtentList()
     ],
   );
 }

SliverAppBar 常用来实现复杂的可折叠效果的头布局，当然在本文章中只是构建了一个普通的标题，在CustomScrollView实现的一个经典滑动折叠头部图片的效果|NestedScrollView实现的一个经典滑动折叠头部图片的效果两文章中有使用到折叠配置效果。

  SliverAppBar buildSliverAppBar() {
    return SliverAppBar(
      title: Text("讲解组合滑动"),
    );
  }

CustomScrollView 中使用的九宫格你不能再去使用 GridView了，在Sliver家族中，有SliverGridView，当然它与 GridView 的用法是一至的，代码如下：

 SliverGrid buildSliverGrid() {
   return SliverGrid(
     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
       ///九宫格的列数
       crossAxisCount: 3,
       ///子Widget 宽与高的比值
       childAspectRatio: 2.0,
       ///主方向的 两个 子Widget 之间的间距
       mainAxisSpacing: 10,
       /// 次方向 子Widget 之间的间距
       crossAxisSpacing: 10,
     ),
     ///子Item构建器
     delegate: new SliverChildBuilderDelegate(
       (BuildContext context, num index) {
         ///每一个子Item的样式
         return Container(
           color: Colors.blue,
           child: Text("grid $index"),
         );
       },
       ///子Item的个数
       childCount: 10,
     ),
   );
 }

CustomScrollView 使用的列表你也不能使用 ListView了，需要使用SliverListView 或者是 SliverFixedExtentList，当然在这里使用了 SliverFixedExtentList 代码如下：

SliverFixedExtentList buildSliverFixedExtentList() {
   return SliverFixedExtentList(
     ///子条目的高度
     itemExtent: 40,
     ///子条目布局构建代理
     delegate: new SliverChildBuilderDelegate(
       (BuildContext context, num index) {
         ///子条目的布局样式
         return Container(
           color: Colors.red,
           child: Text("list $index"),
           margin: EdgeInsets.only(bottom: 10),
         );
       },
       ///子条目的个数
       childCount: 40,
     ),
   );
 }

SliverListView 与 SliverFixedExtentList 的不同，我们可以这样理解，SliverListView 高度不确定，每个 Item的高度也不是固定死的。 SliverFixedExtentList 子Item的高度是固定的，整体可填充剩下的空白空间

完毕

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