フラッターアニメーションコンポーネント：AnimatedContainer

フラッターシリーズ全体のディレクトリ

最初に私には私たちがSETSTATEによって、そのプロパティの値を変更すると、さまざまなプロパティを設定し、アニメーション、実際にはない場合、AnimatedContainerや他のコンテナコントロールを開始するように呼びかけ、AnimatedContainerはアセンブリ2つの境界値に直接提供することができると思いましたときのアニメーションは、コードに直接表示されます。

import 'package:flutter/material.dart';

///
/// des:
/// [@author]：
/// [@date]： 2019-04-30 10:06
///
class AnimatedContainerDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _AnimatedContainerDemo();
}

class _AnimatedContainerDemo extends State<AnimatedContainerDemo> {
  double _height = 100;
  Color _color = Colors.red;

  _changeValue() {
    setState(() {
      _height = _height == 100 ? 200 : 100;
      _color = _color == Colors.red ? Colors.blue : Colors.red;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        AnimatedContainer(
          color: _color,
          width: 200,
          height: _height,
          curve: Curves.elasticIn,
          duration: Duration(seconds: 1),
        ),
        RaisedButton(
          child: Text('动画'),
          onPressed: _changeValue,
        ),
      ],
    );
  }
}

SETSTATE AnimatedContainer幅、高さ、色、その他の情報により変更にボタンをクリックして、この変更はすぐに変更はありませんが、アニメーションの1秒があります。

ここでAnimatedContainerのプロパティの説明は次のとおりです。

プロパティ	説明
アラインメント	アラインメント
パディング、マージン	パディング、マージン
色	カラー
デコレーション	ここを見て：https://blog.csdn.net/mengks1987/article/details/84856456#2BoxDecoration_25
foregroundDecoration	装飾で、その以外事前foregroundDecorationを表し、
幅高さ	幅高さ
子	サブエレメント
曲線	曲線アニメーションの実行、デフォルトは線形であり、曲線は等加速度、減速度、などの具体的なソースコード、曲線の多様を見ることができます
期間	期間