我有一个AnimatedContainer
,其中包含文本,并且其宽度在单击时具有动画效果。有没有办法使它与孩子的文字一样大?
class _IconTextAnimatedButtonState extends State<IconTextAnimatedButton> {
double opacity = 0;
bool isActive = false;
double containerWidth = 55.0;
animateIt() {
setState(() {
opacity == 0.0 ? opacity = 1.0 : opacity = 0.0;
opacity == 0.0 ? containerWidth = 55.0 : containerWidth = MediaQuery.of(context).size.width;
containerWidth == MediaQuery.of(context).size.width ? isActive = true : isActive = false;
});
}
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () => animateIt(),
child: AnimatedContainer(
height: 50.0,
width: containerWidth,
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: Colors.orange
),
duration: Duration(milliseconds: 100),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: Visibility(
maintainSize: isActive,
maintainAnimation: true,
maintainState: true,
visible: isActive,
child: AnimatedOpacity(
duration: Duration(milliseconds: 100),
opacity: opacity,
child: Padding(
padding: const EdgeInsets.only(left: 5.0),
child: Text("this is a long text with this be a problem?"),
),
),
),
),
],
)
),
);
}
如果我使用Row
将AnimatedContainer
包裹到mainAxisSize: MainAxisSize.min
上,它可以按我的意愿工作,但它没有动画吗?