【问题标题】：Invisibility , Gone , visibility ROW & Column in FlutterFlutter 中的不可见性、消失、可见性 ROW 和列
【发布时间】：2020-02-10 12:56:12
【问题描述】：

我在 Flutter 中使用此代码，我想对某些 Row 或 column 进行可见/不可见。在 android studio 和 java 中我们使用：

msg.setVisibility(View.INVISIBLE);

但是如何在 Flutter 中将 Id 用于 Row 和小部件以及不可见/可见的小部件和 Row ？这是我的代码：

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home : MyHomePage()
    );
  }

}

class MyHomePage extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Column(children: <Widget>[
        Row(
          //ROW 1
           children: [
             Container(
              color: Colors.lightGreen,
               margin: EdgeInsets.all(25.0),
               child: FlutterLogo(
               size: 60.0,
               ),
             ),

             Container(
               color: Colors.orange,
               margin: EdgeInsets.all(25.0),
               child: FlutterLogo(
                 size: 60.0,
               ),
             ),
            ],
          ),






        Row(
          //ROW 1
          children: [
            Container(
              color: Colors.blueAccent,
              margin: EdgeInsets.all(25.0),
              child: FlutterLogo(
                size: 60.0,
              ),
            ),

            Container(
              color: Colors.green,
              margin: EdgeInsets.all(25.0),
              child: FlutterLogo(
                size: 60.0,
              ),
            ),
          ],
        ),






      ]),

      bottomNavigationBar: new Container(
          color:  Colors.redAccent,
          height: 55.0,
          alignment: Alignment.center,
          child: new BottomAppBar(
               color:  Colors.blueAccent,
               child: new Row(
                 mainAxisAlignment: MainAxisAlignment.spaceAround,
                 children: <Widget>[
                   new IconButton(icon: new Icon(Icons.add , color: Colors.black),    onPressed: (){ print("helllo"); } ),
                   new IconButton(icon: new Icon(Icons.remove , color: Colors.black),  onPressed: (){ print("helllo"); } ),
                 ],
               ),
          )
      ),
    );
  }
}//MyHomePage

我想使用 IconButton 来显示/不可见两行。怎么办？

【问题讨论】：

标签： flutter flutter-layout flutter-test

【解决方案1】：

可见

Android (Kotlin)

linear_layout.visibility = View.VISIBLE

Android (AndroidX)

linear_layout.isVisible = true

或

linear_layout.isInvisible = false

或

linear_layout.isGone = false

颤动

Row(
  children: [
    Text(
      "Stack Overflow",
    ),
  ],
);

或

Visibility(
  child: Row(
    children: [
      Text(
        "Stack Overflow",
      ),
    ],
  ),
);

不可见（不可见但保持空间）

Android (Kotlin)

linear_layout.visibility = View.INVISIBLE

Android (AndroidX)

linear_layout.isInvisible = true

颤动

Visibility(
  maintainSize: true,
  visible: false,
  child: Row(
    children: [
      Text(
        "Stack Overflow",
      ),
    ],
  ),
);

或者（当你知道大小时）

Container(
  height: 300,
  child: Row(
    children: [
      Text(
        "Stack Overflow",
      ),
    ],
  ),
);

走了

Android (Kotlin)

linear_layout.visibility = View.GONE

Android (AndroidX)

linear_layout.isGone = true
or
linear_layout.isVisible = false

颤动

Visibility(
  visible: false,
  child: Row(
    children: [
      Text(
        "Stack Overflow",
      ),
    ],
  ),
);

【讨论】：

【解决方案2】：

你可以像这样使用Visibility：

Visibility(
  visible: true,
  child: Text("Visible"),
),
Visibility(
  visible: false,
  maintainState: true,
  maintainAnimation: true,
  maintainSize: true,
  child: Text("Invisible"),
),
Visibility(
  visible: true,
  child: Text("Visible"),
),
Visibility(
  visible: false,
  child: Text("Gone"),
),
Visibility(
  visible: true,
  child: Text("Visible"),
),

这将是结果：

Visible

Visible
Visible

【讨论】：

【解决方案3】：

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home : MyHomePage()
    );
  }

}
class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _WidgetState();
  }
}
class _WidgetState extends State<MyHomePage> {
  bool visible = true;
  bool visible1 = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: <Widget>[
        Visibility(
          visible: visible1,
          child: Row(
            //ROW 1
            children: [
              Container(
                color: Colors.orange,
                margin: EdgeInsets.all(25.0),
                child: FlutterLogo(
                  size: 60.0,
                ),
              ),
              Container(
                color: Colors.orange,
                margin: EdgeInsets.all(25.0),
                child: FlutterLogo(
                  size: 60.0,
                ),
              ),
            ],
          ),
        ),
        Visibility(
          visible: visible,
          child: Row(
            //ROW 1
            children: [
              Container(
                color: Colors.green,
                margin: EdgeInsets.all(25.0),
                child: FlutterLogo(
                  size: 60.0,
                ),
              ),
              Container(
                color: Colors.green,
                margin: EdgeInsets.all(25.0),
                child: FlutterLogo(
                  size: 60.0,
                ),
              ),
            ],
          ),
        ),

      ]),
      bottomNavigationBar: new Container(
          color: Colors.black,
          height: 55.0,
          alignment: Alignment.center,
          child: new BottomAppBar(
            color: Colors.blueAccent,
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                new IconButton(
                    icon: new Icon(Icons.add, color: Colors.black),
                    onPressed: () {
                      print("show");
                      setState(() {
                        visible1 = true;
                      });
                    }),
                new IconButton(
                    icon: new Icon(Icons.remove, color: Colors.black),
                    onPressed: () {
                      print("hide");
                      setState(() {
                        visible1 = false;
                      });
                    }),
              ],
            ),
          )),
    );
  }
}

【讨论】：

【解决方案4】：

有一个名为可见性的特殊小部件。请记住 Flutter 中使用的状态管理反转。您调用 setState() 并为小部件的可见性提供条件。并且不要忘记将您的 Widget 更改为 StatefulWidget

参考 https://api.flutter.dev/flutter/widgets/Visibility-class.html

用法：

child: Visibility(
visible: false,
),

这是应该在您的场景中工作的示例，它隐藏了单击删除按钮时的行并显示在添加时：

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _WidgetState();
  }
}

class _WidgetState extends State<MyHomePage> {
  bool visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: <Widget>[
        Visibility(
          visible: visible,
          child: Row(
            //ROW 1
            children: [
              Container(
                color: Colors.lightGreen,
                margin: EdgeInsets.all(25.0),
                child: FlutterLogo(
                  size: 60.0,
                ),
              ),
              Container(
                color: Colors.orange,
                margin: EdgeInsets.all(25.0),
                child: FlutterLogo(
                  size: 60.0,
                ),
              ),
            ],
          ),
        ),
        Visibility(
          visible: visible,
          child: Row(
            //ROW 1
            children: [
              Container(
                color: Colors.blueAccent,
                margin: EdgeInsets.all(25.0),
                child: FlutterLogo(
                  size: 60.0,
                ),
              ),
              Container(
                color: Colors.green,
                margin: EdgeInsets.all(25.0),
                child: FlutterLogo(
                  size: 60.0,
                ),
              ),
            ],
          ),
        ),
      ]),
      bottomNavigationBar: new Container(
          color: Colors.redAccent,
          height: 55.0,
          alignment: Alignment.center,
          child: new BottomAppBar(
            color: Colors.blueAccent,
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                new IconButton(
                    icon: new Icon(Icons.add, color: Colors.black),
                    onPressed: () {
                      print("show");
                      setState(() {
                        visible = true;
                      });
                    }),
                new IconButton(
                    icon: new Icon(Icons.remove, color: Colors.black),
                    onPressed: () {
                      print("hide");
                      setState(() {
                        visible = false;
                      });
                    }),
              ],
            ),
          )),
    );
  }
}

【讨论】：

将此与我的示例相结合，并与 IconButton 可见/不可见。