Flutter 容器(3) - AnimatedPadding

AnimatedPadding : 会产生动画效果的padding,在给定时间内缩放到指定padding

import 'package:flutter/material.dart';

class AuthList extends StatefulWidget {
  @override
  _AuthListState createState() => _AuthListState();
}

class _AuthListState extends State<AuthList> {
  // 方法和变量需要定义override之前
  double paddingVal = 20;
  _changePadding() {
    setState(() {
      paddingVal = paddingVal == 20.0 ? 100.0 : 20.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('代码测试'),
        centerTitle: true,
      ),
      body: Column(
        children: <Widget>[
          AnimatedPadding(
            padding: EdgeInsets.all(paddingVal),
            duration: Duration(microseconds: 3000),
            curve: Curves.easeInOut, // 弧线
            child: Container(
              color: paddingVal == 20.0 ? Colors.redAccent: Colors.blue,
              height: 200.0,
            ),
          ),
          RaisedButton(
            color: Colors.blue,
            child: Text(
              'Toggle padding',
              style: TextStyle(color: Colors.white),
            ),
            onPressed: _changePadding,
          )
        ],
      ),
    );
  }
}

猜你喜欢

转载自www.cnblogs.com/leslie1943/p/13364747.html