Flutter 中 Offstage

Offstage 是 Flutter 中的一个布局小部件，用于控制其子部件是否在布局中可见。它可以将其子部件设置为处于“离场”状态，即不会在布局中绘制，但仍然会占据空间。这使得你可以在需要时暂时隐藏某些部件，而不需要从布局中移除它们。

Offstage 有一个名为 offstage 的布尔类型参数，用于控制其子部件是否处于离场状态。当 offstage 为 true 时，子部件将处于离场状态；当 offstage 为 false 时，子部件将处于可见状态。

Offstage 在某些情况下非常有用，例如，在需要根据特定条件动态显示或隐藏部件时，你可以使用 Offstage 来实现这个效果，而无需在布局中频繁添加或移除部件。

下面是一个简单的示例代码，演示如何使用 Offstage：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isVisible = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Offstage Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Offstage(
                offstage: _isVisible ? false : true,
                child: Container(
                  width: 200,
                  height: 200,
                  color: Colors.blue,
                  child: Center(
                    child: Text(
                      'Offstage Widget',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() {
                    _isVisible = !_isVisible;
                  });
                },
                child: Text(_isVisible ? 'Hide' : 'Show'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含 Offstage 和 RaisedButton 的 Column。Offstage 中包含了一个蓝色的容器，而 RaisedButton 用于切换容器的可见状态。当点击按钮时，_isVisible 的值会切换，从而控制 Offstage 中的容器是否处于离场状态。