簡介
我們在使用flutter的過程中，有時候需要控制某些組件是否展示，一種方法是將這個組件從render tree中刪除，這樣這個組件就相當於沒有出現一樣，但是有時候，我們只是不想展示這個widget，但是這個組件還是存在的，並且可以接受鍵盤輸入，還可以使用CPU。它和真正的組件唯一不同的就是他是不可見的。
這樣的組件就叫做Offstage。 今天給大家詳細介紹一下Offstage的使用。
Offstage詳解
我們首先來看下Offstage的定義：
class Offstage extends SingleChildRenderObjectWidget
可以看到，Offstage是一個包含單個child的Widget。接下來看下它的構造函數：
const Offstage({ Key? key, this.offstage = true, Widget? child })
: assert(offstage != null),
super(key: key, child: child);
Offstage主要包含兩個屬性，分別是表示是否是offstage狀態的bool值offstage，如果offstage=true，那麼Offstage的子child就會處於隱藏狀態。這時候子child不會佔用任何空間。
剩下的一個屬性就是child了。
那麼Offstage是如何控制child是否offstage的呢？
我們看下它的createRenderObject方法：
RenderOffstage createRenderObject(BuildContext context) => RenderOffstage(offstage: offstage);
可以看到返回的是一個RenderOffstage對象，其中接受一個offstage參數。
如果深入研究RenderOffstage的話，可以看到他的paint方法是這樣的：
void paint(PaintingContext context, Offset offset) {
if (offstage)
return;
super.paint(context, offset);
}
如果offstage是true的話，paint方法直接返回，不會進行任何的繪製。這也就是Offstage的祕密。
Offstage的使用
從上面講解的Offstage的構造函數我們知道，Offstage需要一個bool的offstage屬性。所以這個offstage屬性是可以變換的，從而觸發offstage的不同狀態。
因爲offstage需要這樣的一個狀態，所以我們在使用offstage的時候，一般來說是創建一個StatefulWidget,從而在StatefulWidget中保持這樣的一個offstage屬性。
比如我們創建一個OffstageApp，這是一個StatefulWidget,在它的createState方法中，返回一個State<OffstageApp>對象，在createState方法中，我們定義一個_offstage屬性。
通過使用這個_offstage，我們可以創建Offstage如下：
Offstage(
offstage: _offstage,
child: SizedBox(
key: _key,
width: 150.0,
height: 150.0,
child: Container(
color: Colors.red,
),
),
)
這裏我們設置Offstage的offstage爲剛剛設置的_offstage。
另外爲了展示方便，我們將Offstage的child設置爲一個SizedBox，裏面包含了一個紅色的Container。
SizedBox包含了width和height屬性，方便我們後續的測試。
默認情況下，因爲_offstage=true，所以這個Offstage是不可見的，那麼怎麼將其可見呢？
我們提供一個ElevatedButton,在它的onPressed方法中，我們調用setState方法來修改_offstage，如下所示：
ElevatedButton(
child: const Text('切換offstage'),
onPressed: () {
setState(() {
_offstage = !_offstage;
});
},
),
另外，我們還需要一個ElevatedButton來檢測Offstage的大小，看看在_offstage發生變化的時候，Offstage到底會不會發生變化。
ElevatedButton(
child: const Text('檢測SizedBox大小'),
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content:
Text('SizedBox is ${_getSizedBoxSize()}'),
),
);
})
這裏的_getSizedBoxSize實現如下：
Size _getSizedBoxSize() {
final RenderBox renderBox =
_key.currentContext!.findRenderObject()! as RenderBox;
return renderBox.size;
}
我們通過Offstage的_key,來獲取到它的Context，從而找到對應的RenderBox，拿到它的大小。
好了，這樣我們的代碼就寫好了，最後將OffstageApp放到Scaffold中運行，我們可以得到下面的界面：
[圖片上傳失敗...(image-ea34f7-1667210268032)]
默認Offstage是不會展示的。
如果我們點擊下面的檢測SizeBox大小的按鈕，可以得到下面的界面：
[圖片上傳失敗...(image-d0b22-1667210268032)]
可以看到雖然Offstage沒有展示，但是還是獲取到了它的大小。
然後我們點擊切換Offstage按鈕，可以得到下面的界面：
[圖片上傳失敗...(image-bd6402-1667210268032)]
界面完美的展示了。
總結
Offstage是一個非常方便的組件，可以用來隱藏我們不需要展示的組件，但是仍然可以獲得它的大小。