Flutter 复杂条子在视图颤振中的应用

目前我有FeaturedBlock的列表。功能块包含标题和产品列表。所以问题是，我不确定如何将该块（带有gridList的标题）添加到CustomScrollView。因此，结构是：

--------------
|SliverAppBar|
--------------
...some elements
--------------
|   Header   |   ----> Featured Block header
--------------
------ -------
|    | |     |   ----> Featured Block products
|    | |     |
------ -------
------ -------
|    | |     |
|    | |     |
------ -------
--------------
|   Header   |  ----> Featured Block header
--------------
------ -------
|    | |     |   ----> Featured Block products
|    | |     |
------ -------
------ -------
|    | |     |
|    | |     |
------ -------

---

那么，如何将FeaturedBlock转换为silver元素呢？

您可以复制下面的粘贴运行完整代码
您可以根据您的请求使用

SliverPersistentHeader

和

SliverGrid.count

和更改

crossAxisCount

。
工作演示

完整代码

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Collapsing List Demo')),
        body: CollapsingList(),
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate({
    @required this.minHeight,
    @required this.maxHeight,
    @required this.child,
  });
  final double minHeight;
  final double maxHeight;
  final Widget child;
  @override
  double get minExtent => minHeight;
  @override
  double get maxExtent => math.max(maxHeight, minHeight);
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new SizedBox.expand(child: child);
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}

class CollapsingList extends StatelessWidget {
  SliverPersistentHeader makeHeader(String headerText) {
    return SliverPersistentHeader(
      pinned: true,
      delegate: _SliverAppBarDelegate(
        minHeight: 60.0,
        maxHeight: 200.0,
        child: Container(
            color: Colors.lightBlue, child: Center(child: Text(headerText))),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          title: Text('SliverAppBar'),
          backgroundColor: Colors.green,
          expandedHeight: 200.0,
          flexibleSpace: FlexibleSpaceBar(
            background: Image.network('https://picsum.photos/250?image=9',
                fit: BoxFit.cover),
          ),
        ),
        makeHeader('Header Section 1'),
        SliverGrid.count(
          crossAxisCount: 2,
          children: [
            Container(color: Colors.red, height: 150.0),
            Container(color: Colors.purple, height: 150.0),
            Container(color: Colors.green, height: 150.0),
            Container(color: Colors.orange, height: 150.0),
          ],
        ),
        makeHeader('Header Section 2'),
        SliverGrid.count(
          crossAxisCount: 2,
          children: [
            Container(color: Colors.red, height: 150.0),
            Container(color: Colors.purple, height: 150.0),
            Container(color: Colors.green, height: 150.0),
            Container(color: Colors.orange, height: 150.0),
          ],
        ),
        makeHeader('Header Section 3'),
        SliverGrid.count(
          crossAxisCount: 2,
          children: [
            Container(color: Colors.red, height: 150.0),
            Container(color: Colors.purple, height: 150.0),
            Container(color: Colors.green, height: 150.0),
            Container(color: Colors.orange, height: 150.0),
          ],
        ),
        makeHeader('Header Section 4'),
        SliverGrid.count(
          crossAxisCount: 2,
          children: [
            Container(color: Colors.red, height: 150.0),
            Container(color: Colors.purple, height: 150.0),
            Container(color: Colors.green, height: 150.0),
            Container(color: Colors.orange, height: 150.0),
          ],
        ),
      ],
    );
  }
}

导入“包装：颤振/材料.省道”；
导入'dart:math'作为数学；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
appBar:appBar（标题：文本（“折叠列表演示”），
正文：折叠列表（），
),
);
}
}
类_SliverAppBarDelegate扩展SliverPersistentHeaderDelegate{
_滑动门({
@需要此参数。最小高度，
@需要此.maxHeight，
@需要这个孩子，
});
最终双倍高度；
最终双倍最大高度；
最后一个孩子；
@凌驾
double get minExtent=>minHeight；
@凌驾
double-get-maxExtent=>math.max（maxHeight，minHeight）；
@凌驾
小部件构建(
BuildContext上下文、双收缩偏移、布尔重叠内容）{
返回新的SizedBox.expand（子项：子项）；
}
@凌驾
布尔应该重建（\u SliverAppBarDelegate oldDelegate）{
返回maxHeight！=oldDelegate.maxHeight||
最小高度！=oldDelegate.minHeight||
child！=oldDelegate.child；
}
}
类折叠列表扩展了无状态小部件{
SliverPersistentHeader生成标头（字符串标头文本）{
回程滑动头(
对,，
代表：_SliverAppBarDelegate(
最小高度：60.0，
最大高度：200.0，
子：容器(
颜色：Colors.lightBlue，子对象：中心（子对象：文本（标题文本）），
),
);
}
@凌驾
小部件构建（构建上下文）{
返回自定义滚动视图(
条子：[
滑杆(
标题：文本（“滑动条”），
背景颜色：Colors.green，
扩展高度：200.0，
flexibleSpace:FlexibleSpaceBar(
背景：Image.network（'https://picsum.photos/250?image=9',
安装：BoxFit.盖），
),
),
makeHeader（“标题部分1”），
SliverGrid.count(
交叉轴计数：2，
儿童：[
容器（颜色：Colors.red，高度：150.0），
容器（颜色：Colors.purple，高度：150.0），
容器（颜色：Colors.green，高度：150.0），
容器（颜色：Colors.orange，高度：150.0），
],
),
makeHeader（“标题部分2”），
SliverGrid.count(
交叉轴计数：2，
儿童：[
容器（颜色：Colors.red，高度：150.0），
容器（颜色：Colors.purple，高度：150.0），
容器（颜色：Colors.green，高度：150.0），
容器（颜色：Colors.orange，高度：150.0），
],
),
makeHeader（“标题第3节”），
SliverGrid.count(
交叉轴计数：2，
儿童：[
容器（颜色：Colors.red，高度：150.0），
容器（颜色：Colors.purple，高度：150.0），
容器（颜色：Colors.green，高度：150.0），
容器（颜色：Colors.orange，高度：150.0），
],
),
makeHeader（“标题第4节”），
SliverGrid.count(
交叉轴计数：2，
儿童：[
容器（颜色：Colors.red，高度：150.0），
容器（颜色：Colors.purple，高度：150.0），
容器（颜色：Colors.green，高度：150.0），
容器（颜色：Colors.orange，高度：150.0），
],
),
],
);
}
}

工作演示2

完整代码2

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() => runApp(MyApp());

List<Widget> widgetList = [];

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int count = 0;

  SliverPersistentHeader makeHeader(String headerText) {
    return SliverPersistentHeader(
      pinned: true,
      delegate: _SliverAppBarDelegate(
        minHeight: 60.0,
        maxHeight: 200.0,
        child: Container(
            color: Colors.lightBlue, child: Center(child: Text(headerText))),
      ),
    );
  }

  void _add() {
    count = count + 1;
    widgetList.add(makeHeader(count.toString()));
    widgetList.add(
      SliverGrid.count(
        crossAxisCount: 2,
        children: [
          Container(color: Colors.red, height: 150.0),
          Container(color: Colors.purple, height: 150.0),
          Container(color: Colors.green, height: 150.0),
          Container(color: Colors.orange, height: 150.0),
        ],
      ),
    );

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Collapsing List Demo')),
        body: CollapsingList(),
        floatingActionButton: FloatingActionButton(
          onPressed: _add,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate({
    @required this.minHeight,
    @required this.maxHeight,
    @required this.child,
  });
  final double minHeight;
  final double maxHeight;
  final Widget child;
  @override
  double get minExtent => minHeight;
  @override
  double get maxExtent => math.max(maxHeight, minHeight);
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new SizedBox.expand(child: child);
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}

class CollapsingList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          title: Text('SliverAppBar'),
          backgroundColor: Colors.green,
          expandedHeight: 200.0,
          flexibleSpace: FlexibleSpaceBar(
            background: Image.network('https://picsum.photos/250?image=9',
                fit: BoxFit.cover),
          ),
        ),
        ...widgetList
      ],
    );
  }
}

导入“包装：颤振/材料.省道”；
导入'dart:math'作为数学；
void main（）=>runApp（MyApp（））；
列表widgetList=[]；
类MyApp扩展了StatefulWidget{
@凌驾
_MyAppState createState（）=>\u MyAppState（）；
}
类MyAppState扩展了状态{
整数计数=0；
SliverPersistentHeader生成标头（字符串标头文本）{
回程滑动头(
对,，
代表：_SliverAppBarDelegate(
最小高度：60.0，
最大高度：200.0，
子：容器(
颜色：Colors.lightBlue，子对象：中心（子对象：文本（标题文本）），
),
);
}
void_add（）{
计数=计数+1；
add（makeHeader（count.toString（））；
widgetList.add(
SliverGrid.count(
交叉轴计数：2，
儿童：[
容器（颜色：Colors.red，高度：150.0），
容器（颜色：Colors.purple，高度：150.0），
容器（颜色：Colors.green，高度：150.0），
容器（颜色：Colors.orange，高度：150.0），
],
),
);
setState（（）{}）；
}
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
appBar:appBar（标题：文本（“折叠列表演示”），
正文：折叠列表（），
浮动操作按钮：浮动操作按钮(
按下按钮：_添加，
工具提示：“增量”，
子：图标（Icons.add），
),
),
);
}
}
类_SliverAppBarDelegate扩展SliverPersistentHeaderDelegate{
_滑动门({
@需要此参数。最小高度，
@需要此.maxHeight，
@需要这个孩子，
});
最终双倍高度；
最终双倍最大高度；
最后一个孩子；
@凌驾
double get minExtent=>minHeight；
@凌驾
double-get-maxExtent=>math.max（maxHeight，minHeight）；
@凌驾
小部件构建(
BuildContext上下文、双收缩偏移、布尔重叠内容）{
返回新的SizedBox.expand（子项：子项）；
}
@凌驾
布尔s