淡入淡出元件

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。使用 State 類中的 setState() 方法進行此更改，這會告訴 Flutter 重建小部件。

有關處理使用者輸入的更多資訊，請參閱 Cookbook 中的手勢 (Gestures) 部分。

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),
      ),
    );
  }
}