隐身，消失，能见度

Question

我在Flutter中使用此代码，并且希望对某些Row或column可见/不可见。 在android studio和java中，我们使用：

  

msg.setVisibility（View.INVISIBLE）;

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

<TextBox Text="{Binding FirstName}" TabIndex="1"/>
<TextBox Text="{Binding LastName}" TabIndex="2"/>
<Button Content="Click" Command="{Binding AddToList}" TabIndex="3"/>

我想使用IconButton可见/不可见的两行。 我怎么能？

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 (Kotlin)

linear_layout.visibility = View.VISIBLE

安卓 (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（不可见但保持空间）

Android (Kotlin)

linear_layout.visibility = View.INVISIBLE

安卓 (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

安卓 (AndroidX)

linear_layout.isGone = true
or
linear_layout.isVisible = false

颤动

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