在未知大小的小部件上动画扩展/收缩

Question

我们希望显示从数据库中获取的图像和文本列表。当您点击其中一个图像/文本时，它们应该会用动画展开。使用当前代码，扩展动画按预期工作，但相反则不起作用。图像在没有动画的情况下缩小，然后AnimatedSize动画。请参阅：颤振动画大小仅在一个方向上工作

由于我们没有纯色，因此该问题的解决方案对我们不起作用。

它确实可以使用以下代码处理图像，但它并不理想，文本根本不可以那样工作。

Container(
foregroundDecoration: BoxDecoration(
image: DecorationImage(
image: CachedNetworkImageProvider(
snapshot.data.documents[index]['image'],
),
fit: BoxFit.cover,
alignment: Alignment.topCenter,
),
),
child: AnimatedSize(
duration: Duration(milliseconds: 300),
vsync: this,
child: Opacity(
opacity: 0,
child: Container(
height: _expandedIndex == index ? null : 250,
child: CachedNetworkImage(
imageUrl: snapshot.data.documents[index]['image'] ?? '',
fit: BoxFit.cover,
width: double.infinity,
),
),
),
),
),

我发现很多其他人都有同样的问题，但我从未找到有效的解决方案，所以非常欢迎任何帮助。

谢谢！

Answer 1

使用sizeTransitionWidget。 并设置您的animationController和Tween<double>

它应该工作正常，我已经使用了它，它在正向和反向两个方向上都工作。

Answer 2

尝试sizeTransition小部件，它对我有用。AnimationController和Tween不是必需的。这是我的工作代码。

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget>
with TickerProviderStateMixin {
late final AnimationController _controller = AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
);
late final Animation<double> _animation = CurvedAnimation(
parent: _controller,
curve: Curves.fastOutSlowIn,
);
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextButton(
child: const Text('toggle'),
onPressed: () => _controller.isDismissed
? _controller.forward()
: _controller.reverse(),
),
SizeTransition(
sizeFactor: _animation,
axis: Axis.vertical,
axisAlignment: -1,
child: Container(
color: Colors.amberAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: const [Text("Hello"), Text("World")],
),
),
),
],
),
);
}
}