要解决AnimatedContainer无法在有限和无限约束之间插值的问题,可以使用LayoutBuilder和ConstrainedBox来手动跟踪父容器的尺寸变化,并通过AnimatedContainer来插值更新子容器的约束。
以下是一个示例代码,用于在有限和无限约束之间插值更新AnimatedContainer的宽度:
import 'package:flutter/material.dart';
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State {
double _containerWidth = 100.0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
width: constraints.maxWidth,
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: _containerWidth,
maxWidth: double.infinity,
),
child: AnimatedContainer(
duration: Duration(seconds: 1),
width: _containerWidth,
color: Colors.blue,
child: FlatButton(
onPressed: () {
setState(() {
_containerWidth = _containerWidth == 100.0 ? 200.0 : 100.0;
});
},
child: Text('Change Width'),
),
),
),
);
},
),
);
}
}
void main() {
runApp(MaterialApp(
home: MyWidget(),
));
}
在这个示例中,使用LayoutBuilder来获取父容器的尺寸约束,然后将其应用到Container上。接着,使用ConstrainedBox来限制AnimatedContainer的宽度范围,使其在有限和无限约束之间插值变化。
通过点击按钮,可以改变AnimatedContainer的宽度,触发动画效果。