我需要实现自定义动画，同时滚动用户列表.请参阅一个示例
我当前的视图由以下元素组成:
SingleChildScrollView包含Column，其中包含:
Row个(每个元素都是一个自定义小部件，基本上有Stack个头像、奖牌和详细信息(Column))Row作为表头ListView个其他用户.SingleChildScrollView与填充到提供程序的ScrollNotification的NotificationListener包装在一起.然后在每个顶层元素中监听滚动值，以执行其自身的动画.
我想知道这里要采取的一些一般路径和算法.我try 了AnimatedPositioned，但一旦将其应用于多个元素，就会导致性能问题.到目前为止，我应该使用AnimationController或更多定制的东西吗？任何帮助都将不胜感激.
正如PSkink提到的，使用SliverPersistentHeader可以存档，这是一个演示小部件，用来说明如何做到这一点.你需要玩弄价值.我最喜欢的部分是用.lerp,doubleLerp……以定位这些项目.
class Appx extends StatelessWidget {
const Appx({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverPersistentHeader(
pinned: true,
delegate: CustomSliverPersistentHeaderDelegate(),
),
const SliverToBoxAdapter(
child: SizedBox(
height: 3333,
width: 200,
),
),
],
),
);
}
}
class CustomSliverPersistentHeaderDelegate
extends SliverPersistentHeaderDelegate {
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return LayoutBuilder(builder: (_, constraints) {
final t = shrinkOffset / maxExtent;
final width = constraints.maxWidth;
final itemMaxWidth = width / 4;
double xFactor = -.4;
return ColoredBox(
color: Colors.cyanAccent.withOpacity(.3),
child: Stack(
children: [
Align(
alignment:
Alignment.lerp(Alignment.center, Alignment(xFactor, -.2), t)!
..x,
child: buildRow(
color: Colors.deepPurple, itemMaxWidth: itemMaxWidth, t: t),
),
Align(
alignment: Alignment.lerp(
Alignment.centerRight, Alignment(xFactor, 0), t)!,
child:
buildRow(color: Colors.red, itemMaxWidth: itemMaxWidth, t: t),
),
Align(
alignment: Alignment.lerp(
Alignment.centerLeft, Alignment(xFactor, .2), t)!,
child: buildRow(
color: Colors.amber, itemMaxWidth: itemMaxWidth, t: t),
),
],
),
);
});
}
Container buildRow(
{required Color color, required double itemMaxWidth, required double t}) {
return Container(
width: lerpDouble(itemMaxWidth, itemMaxWidth * .3, t),
height: lerpDouble(itemMaxWidth, itemMaxWidth * .3, t),
color: color,
);
}
/// you need to increase when it it not pinned
@override
double get maxExtent => 400;
@override
double get minExtent => 300;
@override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
return false;
}
}