Flutter 中的 Offstage 小部件：全面指南

在Flutter中，Offstage小部件是一个控制子部件是否在屏幕上可见的小部件。它可以用来实现动画和屏幕之间的导航。

以下是一个简单的使用Offstage小部件的例子：

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> {
  bool _isVisible = true;
 
  void _toggleVisibility() {
    setState(() {
      _isVisible = !_isVisible;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Offstage Example'),
      ),
      body: Column(
        children: <Widget>[
          Offstage(
            offstage: _isVisible,
            child: Container(
              height: 150,
              color: Colors.red,
              child: Center(
                child: Text(
                  'Offstage Widget',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
          ),
          RaisedButton(
            child: Text('Toggle Visibility'),
            onPressed: _toggleVisibility,
          ),
        ],
      ),
    );
  }
}

在这个例子中，我们有一个Offstage小部件，它的offstage属性绑定到一个布尔状态_isVisible。当用户点击按钮时，_toggleVisibility函数被调用，这导致_isVisible的值切换，进而触发重新构建，Offstage小部件根据_isVisible的值隐藏或显示其子部件。