如何用另一个按钮隐藏/显示一个按钮 |扑？

Posted 2023-02-23

【中文标题】如何用另一个按钮隐藏/显示一个按钮 |扑？

【英文标题】：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。

【参考方案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,
            )
          ],
        ),
      ),
    );