Flutter-AnimatedOpacity组件

配图来自网络，如侵必删

在使用Flutter的隐性动画的时候，想要实现透明度的过渡动画，我们可以使用AnimatedOpacity组件来显示。这篇博客分享AnimatedOpacity相关的知识，希望对看文章的小伙伴有所帮助。

AnimatedOpacity

AnimatedOpacity对应的是Opacity组件,AnimatedOpacity属于修饰组件的一种。

Opacity的简单用法

Opacity(
    opacity：0.5,
    child:Text('你好')
)

AnimatedOpacity的简单使用

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'AnimatedOpacity Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double opacity = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: AnimatedOpacity(
          opacity: opacity,
          duration: Duration(microseconds: 2000),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.redAccent,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 点击事件,设置动画开始
            setState(() {
              opacity = 1.0;
            });
          },
          child: const Icon(Icons.start),
        ));
  }
}

完整的代码如上所示，感兴趣的小伙伴可以直接复制到编译器上面运行。效果如下图：

效果图