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

Question

我在 Flutter 中使用这段代码，我想 Visible/Invisible 一些行或列。在 android 工作室和 java 我们使用：

msg.setVisibility(View.INVISIBLE);

但是如何在 Flutter 中将 Id 用于 Row 和 widget 以及 invisible/visible widget 和 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 visible/invisible 两行。我怎么可以？

Answer 1

有一个名为 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;
                      });
                    }),
              ],
            ),
          )),
    );
  }
}

Answer 2

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;
                      });
                    }),
              ],
            ),
          )),
    );
  }
}

Answer 3

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

可见

Android（科特林）

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",
      ),
    ],
  ),
);

Invisible（不可见但保持space）

Android（科特林）

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（科特林）

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",
      ),
    ],
  ),
);

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

Invisibility , Gone , visibility ROW & Column in Flutter

flutter

flutter-test

flutter-layout

可见

Android（科特林）

Android (AndroidX)

颤动

Invisible（不可见但保持space）

Android（科特林）

Android (AndroidX)

颤动

走了

Android（科特林）

Android (AndroidX)

颤动