import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Animated Container')),
body: AnimatedContainerExample(),
),
);
}
}
class AnimatedContainerExample extends StatefulWidget {
@override
_AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}
class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
double _height = 100.0;
void _toggleHeight() {
setState(() {
_height = _height == 100.0 ? 200.0 : 100.0; // 切换高度
});
}
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedContainer(
duration: Duration(seconds: 1), // 动画持续时间
height: _height,
width: 100,
color: Colors.blue,
curve: Curves.easeInOut, // 动画曲线
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _toggleHeight,
child: Text('Toggle Height'),
),
],
),
);
}
}
代码说明：
AnimatedContainer: 这个小部件会自动为你提供一个动画效果，当它的属性（在这里是 height）发生变化时。
duration: 设置动画的持续时间，这里设置为 1 秒。
curve: 你可以设置动画的曲线效果，例如 Curves.easeInOut 使得动画在开始和结束时都比较平滑。
_toggleHeight 方法: 点击按钮会调用这个方法，切换 _height 的值，并触发动画。
使用方法：
将上述代码复制到你的 Flutter 项目中并运行，点击按钮即可看到容器的高度在 100 和 200 之间变化的动画效果。
