簡介

我們在使用flutter的過程中，有時(shí)候需要控制某些組件是否展示，一種方法是將這個(gè)組件從render tree中刪除，這樣這個(gè)組件就相當(dāng)于沒有出現(xiàn)一樣，但是有時(shí)候，我們只是不想展示這個(gè)widget，但是這個(gè)組件還是存在的，并且可以接受鍵盤輸入，還可以使用CPU。它和真正的組件唯一不同的就是他是不可見的。

這樣的組件就叫做Offstage。 今天給大家詳細(xì)介紹一下Offstage的使用。

Offstage詳解

我們首先來看下Offstage的定義：

class Offstage extends SingleChildRenderObjectWidget

可以看到，Offstage是一個(gè)包含單個(gè)child的Widget。接下來看下它的構(gòu)造函數(shù)：

  const Offstage({ Key? key, this.offstage = true, Widget? child })
    : assert(offstage != null),
      super(key: key, child: child);

Offstage主要包含兩個(gè)屬性，分別是表示是否是offstage狀態(tài)的bool值offstage，如果offstage=true，那么Offstage的子child就會(huì)處于隱藏狀態(tài)。這時(shí)候子child不會(huì)占用任何空間。

剩下的一個(gè)屬性就是child了。

那么Offstage是如何控制child是否offstage的呢？

我們看下它的createRenderObject方法：

RenderOffstage createRenderObject(BuildContext context) => RenderOffstage(offstage: offstage);

可以看到返回的是一個(gè)RenderOffstage對象，其中接受一個(gè)offstage參數(shù)。

如果深入研究RenderOffstage的話，可以看到他的paint方法是這樣的：

  void paint(PaintingContext context, Offset offset) {
    if (offstage)
      return;
    super.paint(context, offset);
  }

如果offstage是true的話，paint方法直接返回，不會(huì)進(jìn)行任何的繪制。這也就是Offstage的秘密。

Offstage的使用

從上面講解的Offstage的構(gòu)造函數(shù)我們知道，Offstage需要一個(gè)bool的offstage屬性。所以這個(gè)offstage屬性是可以變換的，從而觸發(fā)offstage的不同狀態(tài)。

因?yàn)閛ffstage需要這樣的一個(gè)狀態(tài)，所以我們在使用offstage的時(shí)候，一般來說是創(chuàng)建一個(gè)StatefulWidget,從而在StatefulWidget中保持這樣的一個(gè)offstage屬性。

比如我們創(chuàng)建一個(gè)OffstageApp，這是一個(gè)StatefulWidget,在它的createState方法中，返回一個(gè)State<OffstageApp>對象，在createState方法中，我們定義一個(gè)_offstage屬性。

通過使用這個(gè)_offstage，我們可以創(chuàng)建Offstage如下：

Offstage(
          offstage: _offstage,
          child: SizedBox(
            key: _key,
            width: 150.0,
            height: 150.0,
            child: Container(
              color: Colors.red,
            ),
          ),
        )

這里我們設(shè)置Offstage的offstage為剛剛設(shè)置的_offstage。

另外為了展示方便，我們將Offstage的child設(shè)置為一個(gè)SizedBox，里面包含了一個(gè)紅色的Container。

SizedBox包含了width和height屬性，方便我們后續(xù)的測試。

默認(rèn)情況下，因?yàn)開offstage=true，所以這個(gè)Offstage是不可見的，那么怎么將其可見呢？

我們提供一個(gè)ElevatedButton,在它的onPressed方法中，我們調(diào)用setState方法來修改_offstage，如下所示：

ElevatedButton(
          child: const Text('切換offstage'),
          onPressed: () {
            setState(() {
              _offstage = !_offstage;
            });
          },
        ),

另外，我們還需要一個(gè)ElevatedButton來檢測Offstage的大小，看看在_offstage發(fā)生變化的時(shí)候，Offstage到底會(huì)不會(huì)發(fā)生變化。

 ElevatedButton(
              child: const Text('檢測SizedBox大小'),
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content:
                    Text('SizedBox is ${_getSizedBoxSize()}'),
                  ),
                );
              })

這里的_getSizedBoxSize實(shí)現(xiàn)如下：

  Size _getSizedBoxSize() {
    final RenderBox renderBox =
    _key.currentContext!.findRenderObject()! as RenderBox;
    return renderBox.size;
  }

我們通過Offstage的_key,來獲取到它的Context，從而找到對應(yīng)的RenderBox，拿到它的大小。

好了，這樣我們的代碼就寫好了，最后將OffstageApp放到Scaffold中運(yùn)行，我們可以得到下面的界面：

默認(rèn)Offstage是不會(huì)展示的。

如果我們點(diǎn)擊下面的檢測SizeBox大小的按鈕，可以得到下面的界面：

可以看到雖然Offstage沒有展示，但是還是獲取到了它的大小。

然后我們點(diǎn)擊切換Offstage按鈕，可以得到下面的界面：

界面完美的展示了。

總結(jié)

Offstage是一個(gè)非常方便的組件，可以用來隱藏我們不需要展示的組件，但是仍然可以獲得它的大小。