【问题标题】：How to hide/show a button with another button | Flutter?如何用另一个按钮隐藏/显示一个按钮 |扑？
【发布时间】：2020-12-23 19:29:35
【问题描述】：

编程和飞镖/颤振新手。

谢谢。

所以 2 按钮我！和你！，我必须隐藏并显示我！按钮点击你！按钮。那么任何人都可以帮助我找到我的问题的解决方案。

如果我有更多数量的按钮并使用单个按钮显示/隐藏所有按钮会怎样。

我的代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: SafeArea(
        child: Column(
          children: [
            MaterialButton(
              onPressed: () {},
              child: Text('Me!'),
              color: Colors.green,
            ),
            MaterialButton(
              onPressed: () {},
              child: Text('You!'),
              color: Colors.red,
            )
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

您可以根据 bool 变量显示/隐藏任何小部件，并在任何按钮上使用 ontap 中的 setState 将 bool 的值设置为 true/false。

标签： android-studio flutter dart

【解决方案1】：

这里有 3 个例子。

1

class _MyHomePageState extends State<MyHomePage> {
  bool hide = false;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: SafeArea(
        child: Column(
          children: [
            if(!hide)MaterialButton(
              onPressed: () {},
              child: Text('Me!'),
              color: Colors.green,
            ),
            MaterialButton(
              onPressed: () {
                 setState((){
                    hide = !hide;
                 });
              },
              child: Text('${hide ? "Show" : "Hide"}'),
              color: Colors.red,
            )
          ],
        ),
      ),
    );
  }
}

2

class _MyHomePageState extends State<MyHomePage> {
  bool hide = false;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: SafeArea(
        child: Column(
          children: [
            Opacity(
              opacity: hide ? 0 : 1,
              child: MaterialButton(
                 onPressed: () {},
                 child: Text('Me!'),
                 color: Colors.green,
             )
            ),
            MaterialButton(
              onPressed: () {
                 setState((){
                    hide = !hide;
                 });
              },
              child: Text('${hide ? "Show" : "Hide"}'),
              color: Colors.red,
            )
          ],
        ),
      ),
    );
  }
}

3（添加动画）

class _MyHomePageState extends State<MyHomePage> {
  bool hide = false;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: SafeArea(
        child: Column(
          children: [
            AnimatedOpacity(
              opacity: hide ? 0 : 1,
              duration: Duration(seconds: 2),
              child: MaterialButton(
                 onPressed: () {},
                 child: Text('Me!'),
                 color: Colors.green,
             )
            ),
            MaterialButton(
              onPressed: () {
                 setState((){
                    hide = !hide;
                 });
              },
              child: Text('${hide ? "Show" : "Hide"}'),
              color: Colors.red,
            )
          ],
        ),
      ),
    );
  }
}

注意：第一个示例将从小部件树中删除按钮。对于第二个和第三个，按钮将在小部件树中但不可见。

因此您可以将其视为：
第一个示例：按钮已消失。
第二个例子：按钮是不可见的。

【讨论】：

【解决方案2】：

使用可见性小部件。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isVisible = true; //will be visible for the first frame
  @override
  Widget build(BuildContext context) {
    return Container(
      child: SafeArea(
        child: Column(
          children: [
            Visibility(
              visible: isVisible,
              child: MaterialButton(
                onPressed: () {},
                child: Text('Me!'),
                color: Colors.green,
              ),
            ),
            MaterialButton(
              onPressed: () {
                setState(() {
                  isVisible = !isVisible;
                });
              },
              child: Text('You!'),
              color: Colors.red,
            )
          ],
        ),
      ),
    );
  }
}

【讨论】：