Flutter 淡入淡出效果

在Flutter中，实现淡入淡出效果可以使用AnimatedOpacity控件。以下是一个简单的示例代码，展示如何使用AnimatedOpacity来创建一个淡入淡出的效果：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  double opacityLevel = 1.0;
 
  void _toggleOpacity() {
    setState(() {
      opacityLevel = opacityLevel == 1.0 ? 0.0 : 1.0;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fade Example'),
      ),
      body: Center(
        child: AnimatedOpacity(
          duration: Duration(milliseconds: 800),
          opacity: opacityLevel,
          child: Container(
            width: 150,
            height: 150,
            color: Colors.blue,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleOpacity,
        tooltip: 'Toggle Opacity',
        child: Icon(Icons.flip),
      ),
    );
  }
}

在这个示例中，我们定义了一个HomePage状态ful控件，其中包含一个opacityLevel状态变量，用于控制AnimatedOpacity的透明度。_toggleOpacity方法通过切换opacityLevel的值来触发淡入淡出动画。点击FloatingActionButton会调用_toggleOpacity方法，从而使蓝色的Container组件出现或消失。