[英]How to make 'stacked card list view' in flutter?
I want to build ui similar to this link in flutter.我想在flutter中构建类似于此链接的ui。
https://github.com/loopeer/CardStackView/blob/master/screenshot/screenshot1.gif https://github.com/loopeer/CardStackView/blob/master/screenshot/screenshot1.gif
Key ideal features are followings.主要的理想特征如下。
First, I found some 'tinder' like ui like following and tried them.首先,我发现了一些像 ui 这样的“火种”并尝试了它们。 https://blog.geekyants.com/tinder-swipe-in-flutter-7e4fc56021bc
https://blog.geekyants.com/tinder-swipe-in-flutter-7e4fc56021bc
However, users need to swipe each single card, that required user to swipe many times to browse list items.但是,用户需要刷每张卡片,这需要用户刷多次才能浏览列表项。
And then I could somehow make a list view whose items are overlapped with next ones.然后我可以以某种方式制作一个列表视图,其项目与下一个项目重叠。
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()),
),
),
),
);
}
}
However items don't stop at the top of screen, which is not exactly what I want.但是项目不会停在屏幕顶部,这不是我想要的。 I guess I can achieve this effect by customizing ScrollController or ScrollPhysics but I'm not sure where I should change.
我想我可以通过自定义 ScrollController 或 ScrollPhysics 来实现这种效果,但我不确定应该在哪里更改。
You can achieve a similar behaviour with SliverPersistentHeader
and a CustomScrollView
, and you can wrap your cards in GestureDetector
to modify their height by changing the value of SliverPersistentHeaderDelegate
's maxExtent
parameter.您可以使用
SliverPersistentHeader
和CustomScrollView
实现类似的行为,您可以将卡片包裹在GestureDetector
,通过更改SliverPersistentHeaderDelegate
的maxExtent
参数的值来修改它们的高度。 Here is a small app I wrote that achieves something that might look like what you are looking for:这是我写的一个小应用程序,它实现了一些可能看起来像你正在寻找的东西:
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;
}
}
Here is how it looks like in action:这是它的实际运行情况:
Stacked list example .gif堆叠列表示例 .gif
And here is a really good article about Flutter's slivers that might help you in this regard:这是一篇关于 Flutter 的 slivers 的非常好的文章,可能在这方面对您有所帮助:
Slivers, demystified 裂片人,揭开神秘面纱
Hope this helps you get in the right direction.希望这可以帮助您找到正确的方向。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.