从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;
});
},
),
],
),
),
),
);
}
}发布于 2020-08-28 01:43:20
要在小部件的内容更改时对其大小进行动画处理,可以使用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 anywhere。
附注:要使vsync: this工作,请将mixin添加到状态类中:
class _CompanyDemoState extends State<CompanyDemo> with SingleTickerProviderStateMixin {https://stackoverflow.com/questions/63618528
复制相似问题