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 opacity = 1.0; // 初始透明度为不透明
 
  // 切换透明度的方法
  void _toggleOpacity() {
    setState(() {
      opacity = opacity == 1.0 ? 0.0 : 1.0;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('淡入淡出效果'),
      ),
      body: Center(
        child: AnimatedOpacity(
          opacity: opacity, // 透明度
          duration: Duration(milliseconds: 500), // 动画持续时间
          child: Container(
            width: 150,
            height: 150,
            color: Colors.blue,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleOpacity, // 点击切换透明度
        tooltip: '切换透明度',
        child: Icon(Icons.flip),
      ),
    );
  }
}

在这个示例中，我们创建了一个HomePage状态ful widget，其中包含一个_toggleOpacity方法来切换opacity值，从而触发淡入淡出动画。AnimatedOpacity的opacity属性绑定到了这个状态值上，duration属性定义了动画的持续时间。点击FloatingActionButton会执行_toggleOpacity方法，从而触发淡入或淡出效果。