如何解决Flutter AnimatedContainer调整大小溢出问题
从gif上可以清楚地看到,当轻按“切换”按钮时,AnimatedContainer的高度会从X更改为Y,具体取决于枚举类型,但是每当它必须先变大时,新添加的小部件就会溢出。有办法解决吗?还是另一个可以帮助我实现预期动画的小部件?谢谢!
enum Company { FOUR,TWO }
class CompanyDemo extends StatefulWidget {
@override
_CompanyDemoState createState() => _CompanyDemoState();
}
class _CompanyDemoState extends State<CompanyDemo> {
Company _comp = Company.FOUR;
double containerHeight = 170;
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),body: Padding(
padding: EdgeInsets.all(15.0),child: Form(
key: _formKey,child: Column(
children: [
AnimatedContainer(
height: containerHeight,duration: Duration(seconds: 1),padding: EdgeInsets.all(15),decoration: BoxDecoration(
border: Border.all(color: Colors.grey),borderRadius: BorderRadius.circular(10),),child: Column(
children: [
_comp == Company.TWO
? TextFormField(
decoration: InputDecoration(
labelText: 'CEO',border: InputBorder.none,prefixIcon: Icon(Icons.person),)
: SizedBox(),_comp == Company.TWO
? Divider(color: Colors.grey)
: SizedBox(),TextFormField(
decoration: InputDecoration(
labelText: 'Head Directive',prefixIcon: Icon(Icons.people),Divider(color: Colors.grey),TextFormField(
decoration: InputDecoration(
labelText: 'Human Resources',prefixIcon: Icon(Icons.nature_people),_comp == Company.TWO
? TextFormField(
decoration: InputDecoration(
labelText: 'Slave',prefixIcon: Icon(Icons.person_pin),],RaisedButton(
child: Text('Switch'),onPressed: () {
setState(() {
_comp = _comp == Company.TWO ? Company.FOUR : Company.TWO;
containerHeight = _comp == Company.TWO ? 320 : 170;
});
},);
}
}
解决方法
要在其内容更改时为小部件尺寸设置动画,可以使用AnimatedSize
Container(
padding: ...,decoration: ...,child: AnimatedSize(
vsync: this,alignment: Alignment.topCenter,duration: Duration(seconds: 1),child: Column(
children: [
TextField(),TextField(),_comp == Company.TWO ? TextField() : SizedBox(),],),)
它将自动从子内容中推断出大小,因此您无需在任何地方指定height
。
P.S。要使vsync: this
正常运行,请将mixin添加到您的状态类中:
class _CompanyDemoState extends State<CompanyDemo> with SingleTickerProviderStateMixin {
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。