隐式动画_Flutter 基础教程

隐式动画是指在Flutter中，通过改变组件属性的值来触发动画效果，而不需要显式地使用动画控制器和动画组件。Flutter会自动根据属性值的变化来产生动画效果。

下面是一个简单的例子，演示如何使用隐式动画实现一个简单的动画效果：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimatedContainerDemo(),
    );
  }
}

class AnimatedContainerDemo extends StatefulWidget {
  @override
  _AnimatedContainerDemoState createState() => _AnimatedContainerDemoState();
}

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
  bool _isExpanded = false;

  void _toggleExpanded() {
    setState(() {
      _isExpanded = !_isExpanded;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('隐式动画示例'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: _toggleExpanded,
          child: AnimatedContainer(
            duration: Duration(milliseconds: 500),
            curve: Curves.easeInOut,
            width: _isExpanded ? 200.0 : 100.0,
            height: _isExpanded ? 200.0 : 100.0,
            color: _isExpanded ? Colors.blue : Colors.red,
            child: Center(
              child: Text(
                '点击我切换大小和颜色',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个AnimatedContainer组件，并在onTap事件中切换_isExpanded变量的值。当_isExpanded为true时，容器的宽度、高度和颜色会从原来的值改变为新的值，产生一个渐变的动画效果。

通过这个例子，你可以看到如何使用隐式动画来实现简单的动画效果。在实际开发中，你也可以根据需要结合不同的属性和事件来实现更复杂的动画效果。希望这个例子能帮助你更好地理解Flutter中的动画效果。