Dart 如何制作'；堆叠卡片列表视图'；飘飘然？

我想在flutter中构建类似于此链接的ui

主要的理想特性如下

• 行为类似于列表视图，但卡片应堆叠在屏幕顶部
• 列表可以有无限个项目。所以旧卡应该回收利用以节省内存
• 我还想为每张卡设置不同的大小

首先，我发现了一些类似tinder的ui，并尝试了它们。

然而，用户需要刷卡，这需要用户多次刷卡才能浏览列表项

然后我可以创建一个列表视图，其中的项目与下一个项目重叠

import 'package:flutter/material.dart';

class StackedList extends StatelessWidget {
  List<ItemCard> cards = [];

  StackedList() {
    for (int i = 0; i < 20; i++) {
      cards.add(ItemCard(i));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('title')),
      body: Container(
        child: ListView.builder(
          itemBuilder: (context, index) {
            return Align(
              alignment: Alignment.topCenter,
              heightFactor: 0.8,
              child: cards[index],
            );
          },
          itemCount: cards.length,
        ),
      ),
    );
  }
}

class ItemCard extends StatelessWidget {
  int index;

  ItemCard(this.index);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        boxShadow: [
          BoxShadow(color: Colors.black, blurRadius: 20.0),
        ],
      ),
      child: SizedBox.fromSize(
        size: const Size(300, 400),
        child: Card(
          elevation: 5.0,
          color: index % 2 == 0 ? Colors.blue : Colors.red,
          child: Center(
            child: Text(index.toString()),
          ),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
类StackedList扩展了无状态小部件{
列表卡=[]；
StackedList（）{
对于（int i=0；i<20；i++）{
卡片。添加（项目卡片（i））；
}
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：常量文本（'title'）），
主体：容器(
子项：ListView.builder(
itemBuilder：（上下文，索引）{
返回对齐(
对齐：alignment.topCenter，
高度系数：0.8，
子：卡片[索引]，
);
},
itemCount:cards.length，
),
),
);
}
}
类ItemCard扩展了无状态小部件{
整数指数；
项目卡（本索引）；
@凌驾
小部件构建（构建上下文）{
返回容器(
装饰：康斯特盒子装饰(
boxShadow：[
BoxShadow（颜色：Colors.black，模糊半径：20.0），
],
),
子项：SizedBox.fromSize(
尺寸：常数尺寸（300400），
孩子：卡片(
标高：5.0，
颜色：索引%2==0？颜色。蓝色：颜色。红色，
儿童：中心(
子项：文本（index.toString（）），
),
),
),
);
}
}

但是，项目不会停在屏幕顶部，这不是我想要的。

---

我想我可以通过自定义ScrollController或ScrollPhysics来实现这种效果，但我不确定应该在哪里进行更改。

使用

SliverPersistentHeader

和

CustomScrollView

可以实现类似的行为，您可以使用

手势检测器

包装卡，通过更改

SliverPersistentHeaderDelegate

的

maxExtent

参数的值来修改卡的高度。下面是我编写的一个小应用程序，它实现了一些可能与您正在寻找的东西类似的功能：

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stacked list example',
      home: Scaffold(
          appBar: AppBar(
            title: Text("Stacked list example"),
            backgroundColor: Colors.black,
          ),
          body: StackedList()),
    );
  }
}

class StackedList extends StatelessWidget {
  final List<Color> _colors = Colors.primaries;
  static const _minHeight = 16.0;
  static const _maxHeight = 120.0;

  @override
  Widget build(BuildContext context) => CustomScrollView(
        slivers: _colors
            .map(
              (color) => StackedListChild(
                minHeight: _minHeight,
                maxHeight: _colors.indexOf(color) == _colors.length - 1
                    ? MediaQuery.of(context).size.height
                    : _maxHeight,
                pinned: true,
                child: Container(
                  color: _colors.indexOf(color) == 0
                      ? Colors.black
                      : _colors[_colors.indexOf(color) - 1],
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.vertical(
                          top: Radius.circular(_minHeight)),
                      color: color,
                    ),
                  ),
                ),
              ),
            )
            .toList(),
      );
}

class StackedListChild extends StatelessWidget {
  final double minHeight;
  final double maxHeight;
  final bool pinned;
  final bool floating;
  final Widget child;

  SliverPersistentHeaderDelegate get _delegate => _StackedListDelegate(
      minHeight: minHeight, maxHeight: maxHeight, child: child);

  const StackedListChild({
    Key key,
    @required this.minHeight,
    @required this.maxHeight,
    @required this.child,
    this.pinned = false,
    this.floating = false,
  })  : assert(child != null),
        assert(minHeight != null),
        assert(maxHeight != null),
        assert(pinned != null),
        assert(floating != null),
        super(key: key);

  @override
  Widget build(BuildContext context) => SliverPersistentHeader(
      key: key, pinned: pinned, floating: floating, delegate: _delegate);
}

class _StackedListDelegate extends SliverPersistentHeaderDelegate {
  final double minHeight;
  final double maxHeight;
  final Widget child;

  _StackedListDelegate({
    @required this.minHeight,
    @required this.maxHeight,
    @required this.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(_StackedListDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}

导入“包装：颤振/材料.省道”；
导入'dart:math'作为数学；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“堆叠列表示例”，
家：脚手架(
appBar:appBar(
标题：文本（“堆叠列表示例”），
背景颜色：Colors.black，
),
正文：StackedList（）），
);
}
}
类StackedList扩展了无状态小部件{
最终列表_colors=colors.primaries；
静态常数最小高度=16.0；
静态常数_maxHeight=120.0；
@凌驾
小部件构建（BuildContext上下文）=>CustomScrollView(
条子：_颜色
.地图(
（颜色）=>StackedListChild(
最小高度：_最小高度，
maxHeight:_colors.indexOf（color）==_colors.length-1
？MediaQuery.of（上下文）.size.height
：_maxHeight，
对,，
子：容器(
颜色：_colors.indexOf（color）==0
颜色。黑色
：_colors[_colors.indexOf（color）-1]，
子：容器(
装饰：盒子装饰(
borderRadius:borderRadius.vertical(
顶部：半径。圆形（_最小高度）），
颜色：颜色，
),
),
),
),
)
.toList（），
);
}
类StackedListChild扩展了无状态小部件{
最终双倍高度；
最终双倍最大高度；
最后一步；
最终布尔浮动；
最后一个孩子；
SliverPersistentHeaderDelegate获取_delegate=>_StackedListDelegate(
最小高度：最小高度，最大高度：最大高度，子级：子级）；
常量StackedListChild({
关键点，
@需要此参数。最小高度，
@需要此.maxHeight，
@需要这个孩子，
this.pinted=false，
this.floating=false，
})：assert（child！=null），
断言（最小高度！=null），
断言（maxHeight！=null），
断言（pinted！=null），
断言（浮动！=null），
超级（键：键）；
@凌驾
小部件构建（BuildContext上下文）=>SliverPersistentHeader(
关键点：关键点，固定：固定，浮动：浮动，委托：\委托）；
}
类_StackedListDelegate扩展SliverPersistentHeaderDelegate{
最终双倍高度；
最终双倍最大高度；
最后一个孩子；
_StackedListDelegate({
@需要此参数。最小高度，
@需要此.maxHeight，
@需要这个孩子，
});
@凌驾
double get minExtent=>minHeight；
@凌驾
double-get-maxExtent=>math.max（maxHeight，minHeight）；
@凌驾
小部件构建(
BuildContext上下文、双收缩偏移、布尔重叠内容）{
返回新的SizedBox.expand（子项：子项）；
}
@凌驾
bool应重新生成（\u StackedListDelegate oldDelegate）{
返回maxHeight！=oldDelegate.maxHeight||
最小高度！=oldDelegate.minHeight||
child！=oldDelegate.child；
}
}

下面是它在实际中的表现：

这里有一篇关于颤振碎片的非常好的文章，可能在这方面对您有所帮助：

---

希望这有助于你找到正确的方向。

显示代码，显示你已经做了什么，否则问题就会解决