![](/img/trans.png)
[英]Flutter: AnimatedContainer with Column child overflow warning
[英]Flutter AnimatedContainer resizing overflow issue
正如在 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',
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;
});
},
),
],
),
),
),
);
}
}
要在其内容更改时为小部件大小设置动画,您可以使用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(),
],
),
),
)
它会自动从子内容推断大小,因此您无需在任何地方指定height
。
PS使vsync: this
工作,将mixin添加到您的状态类:
class _CompanyDemoState extends State<CompanyDemo> with SingleTickerProviderStateMixin {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.