[英]Flutter AnimatedContainer resizing overflow issue
as clearly seen on the gif, when the switch button is tapped the AnimatedContainer's height changes from X to Y depending on the enum type but whenever it has to get larger first it overflows with the newly added widgets.正如在 gif 上清楚地看到的那样,当点击开关按钮时,AnimatedContainer 的高度会根据枚举类型从 X 变为 Y,但是每当它必须先变大时,它就会溢出新添加的小部件。 Is there a way around of this?
有没有办法解决这个问题? Or maybe another widget that can help me achieve the intended animation?
或者也许是另一个可以帮助我实现预期动画的小部件? Thanks!
谢谢!
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',
border: InputBorder.none,
prefixIcon: Icon(Icons.people),
),
),
Divider(color: Colors.grey),
TextFormField(
decoration: InputDecoration(
labelText: 'Human Resources',
border: InputBorder.none,
prefixIcon: Icon(Icons.nature_people),
),
),
_comp == Company.TWO
? Divider(color: Colors.grey)
: SizedBox(),
_comp == Company.TWO
? TextFormField(
decoration: InputDecoration(
labelText: 'Slave',
border: InputBorder.none,
prefixIcon: Icon(Icons.person_pin),
),
)
: SizedBox(),
],
),
),
RaisedButton(
child: Text('Switch'),
onPressed: () {
setState(() {
_comp = _comp == Company.TWO ? Company.FOUR : Company.TWO;
containerHeight = _comp == Company.TWO ? 320 : 170;
});
},
),
],
),
),
),
);
}
}
To animate widget size when its content changes, you can useAnimatedSize要在其内容更改时为小部件大小设置动画,您可以使用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(),
_comp == Company.TWO ? TextField() : SizedBox(),
_comp == Company.TWO ? TextField() : SizedBox(),
_comp == Company.TWO ? TextField() : SizedBox(),
],
),
),
)
It will infer size from child contents automatically, so you don't need to specify height
anywhere.它会自动从子内容推断大小,因此您无需在任何地方指定
height
。
PS to make vsync: this
work, add mixin to your state class: PS使
vsync: this
工作,将mixin添加到您的状态类:
class _CompanyDemoState extends State<CompanyDemo> with SingleTickerProviderStateMixin {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.