首页 > 建站教程 > APP开发,混合APP >  Flutter笔记50: AnimatedPadding组件正文

Flutter笔记50: AnimatedPadding组件

AnimatedPadding组件,顾名思义:带动画的padding:
class _DemoPageState extends State<DemoPage> {
  double paddingValue = 10.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 300.0,
          height: 300.0,
          color: Colors.red,
          //带动画的内边距
          child: AnimatedPadding(
            //均衡的内边距
            padding: EdgeInsets.symmetric(
                //水平垂直间距
                horizontal: paddingValue,
                vertical: paddingValue),
            duration: Duration(milliseconds: 10000),
            //动画效果
            curve: Curves.easeInOut,
            child: Container(
              height: 200.0,
              width: 200.0,
              color: Colors.green,
            ),
          ),
        ),
        RaisedButton(
          child: Text('增加'),
          onPressed: () {
            setState(() {
              paddingValue = 100.0;
            });
          },
        )
      ],
    );
  }
}