Flutter 中的 Invisibility ， Gone ，可见性 ROW 和 Column

Question

我在 Flutter 中使用此代码，我想显示/隐藏某些 Row 或 column 。在 android studio 和 java 中，我们使用：

msg.setVisibility(View.INVISIBLE);

但是如何将 Id 用于 Flutter 中的 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 来显示/不可见两行。我怎么能？

Answer 1

你可以这样使用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

Answer 2

有一个特殊的小部件称为Visibility。请记住 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;
                      });
                    }),
              ],
            ),
          )),
    );
  }
}