淡入淡出元件

UI 開發者經常需要在螢幕上顯示和隱藏元素。然而，快速地在螢幕上彈出和消失元素可能會讓終端使用者感到不適。相反，使用不透明度動畫使元素淡入淡出，以建立流暢的體驗。

AnimatedOpacity 小部件可以輕鬆執行不透明度動畫。本教程採用以下步驟：

1. 建立一個用於淡入淡出的盒子。
2. 定義一個 StatefulWidget。
3. 顯示一個切換可見性的按鈕。
4. 使盒子淡入淡出。

首先，建立一些用於淡入淡出的東西。在這個例子中，在螢幕上繪製一個綠色的盒子。

Container(width: 200, height: 200, color: Colors.green)

現在你有一個綠色的盒子可以動畫，你需要一種方法來知道盒子是否應該可見。為此，請使用 StatefulWidget。

StatefulWidget 是一個建立 State 類的類。State 物件儲存著關於應用程式的一些資料，並提供了一種更新該資料的方法。更新資料時，你還可以要求 Flutter 使用這些更改來重建 UI。

在這種情況下，你有一條資料：一個布林值，表示按鈕是否可見。

要構建 StatefulWidget，請建立兩個類：一個 StatefulWidget 和一個相應的 State 類。提示：Android Studio 和 VSCode 的 Flutter 外掛包含 stful 片段，可快速生成此程式碼。

// The StatefulWidget's job is to take data and create a State class.
// In this case, the widget takes a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({super.key, required this.title});

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

// The State class is responsible for two things: holding some data you can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
  // Whether the green box should be visible.
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    // The green box goes here with some other Widgets.
  }
}

現在你有一些資料來確定綠色的盒子是否應該可見，你需要一種方法來更新這些資料。在這個例子中，如果盒子可見，則隱藏它。如果盒子隱藏，則顯示它。

為了處理這個問題，顯示一個按鈕。當用戶按下按鈕時，將布林值從 true 切換到 false，或從 false 切換到 true。使用 setState() 進行此更改，它是 State 類的一個方法。這會告訴 Flutter 重建小部件。

有關處理使用者輸入的更多資訊，請參閱指南的手勢部分。

FloatingActionButton(
  onPressed: () {
    // Call setState. This tells Flutter to rebuild the
    // UI with the changes.
    setState(() {
      _visible = !_visible;
    });
  },
  tooltip: 'Toggle Opacity',
  child: const Icon(Icons.flip),
)

你的螢幕上有一個綠色的盒子，還有一個按鈕可以切換可見性為 true 或 false。如何讓盒子淡入淡出？使用 AnimatedOpacity 小部件。

AnimatedOpacity 小部件需要三個引數：

• opacity：一個從 0.0（不可見）到 1.0（完全可見）的值。
• duration：動畫完成所需的時間。
• child：要動畫的小部件。在本例中，是綠色的盒子。

AnimatedOpacity(
  // If the widget is visible, animate to 0.0 (invisible).
  // If the widget is hidden, animate to 1.0 (fully visible).
  opacity: _visible ? 1.0 : 0.0,
  duration: const Duration(milliseconds: 500),
  // The green box must be a child of the AnimatedOpacity widget.
  child: Container(width: 200, height: 200, color: Colors.green),
)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Opacity Demo';
    return const MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

// The StatefulWidget's job is to take data and create a State class.
// In this case, the widget takes a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

// The State class is responsible for two things: holding some data you can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
  // Whether the green box should be visible
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: AnimatedOpacity(
          // If the widget is visible, animate to 0.0 (invisible).
          // If the widget is hidden, animate to 1.0 (fully visible).
          opacity: _visible ? 1.0 : 0.0,
          duration: const Duration(milliseconds: 500),
          // The green box must be a child of the AnimatedOpacity widget.
          child: Container(width: 200, height: 200, color: Colors.green),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Call setState. This tells Flutter to rebuild the
          // UI with the changes.
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: 'Toggle Opacity',
        child: const Icon(Icons.flip),
      ),
    );
  }
}