Flutter Gridview.count - 如何在隐藏容器时删除空白 space？

Question

我只想问一下，当Container被隐藏时，如何去除空白space？

正如您在下面看到的我的代码，我试图将其放入 Visibility 并清空 Container，但它仍然占用 GridView.count 中的 spaces .

代码：

  GridView.count(
        primary: false,
        padding: const EdgeInsets.all(20),
        crossAxisSpacing: 0,
        mainAxisSpacing: 0,
        crossAxisCount: 2,
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        children: <Widget>[

         GestureDetector(
              onTap: () => businessTypeClicked(1),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border.all(
                      color: pressed[1]
                          ? Colors.green
                          : Colors.transparent, // set border color
                      width: 3.0), // set border width
                ),
                padding: const EdgeInsets.all(15),
                child: new Column(children: <Widget>[
                  Image.asset(
                    "assets/car.png",
                    height: 100,
                    width: 100,
                  ),
                  Text('Automotive/Transportation',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Constants.colorPrimary))
                ]),
              )),

          Visibility(
            visible: false,
            child: Container(
              color: Colors.white,
            ),
          ),

          Visibility(
            visible: false,
            child: Container(
              color: Colors.white,
            ),
          ),
       ]),

图片：

Answer 1

要隐藏小部件，请尝试 Offstage widget

if 属性 offstage:true //this will not occupy any physical space and will be invisible

if 属性 offstage:false //this will occupy the physical space and visible

Offstage(
   offstage: true,
   child: Text("Visible"),
),

Answer 2

在 Container 上使用条件语句 if，它将允许您 hide/show 小部件 wile 呈现。

 GridView.count(
        primary: false,
        padding: const EdgeInsets.all(20),
        crossAxisSpacing: 0,
        mainAxisSpacing: 0,
        crossAxisCount: 2,
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        children: [
          Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
          Container(
            height: 100,
            width: 100,
            color: Colors.green,
          ),
          if (false) // TODO: Condition
            Container(
              color: Colors.white,
            ),
          if (false) // TODO: Condition
            Container(
              color: Colors.white,
            ),
          Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
          Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
        ],
      ),

Flutter Gridview.count - 如何在隐藏容器时删除空白 space？

Flutter Gridview.count - How to remove blank space when a Container is Hidden?

flutter

flutter-layout

flutter-animation