Flutter 如何仅使用一个功能单独显示/隐藏多个按钮？

在这里，我在Column窗口小部件中排列了三个按钮，我希望当我单击

OnTapDown（）

时，它们分别隐藏，当按下其中一个按钮时，它们分别显示在

onTapUp（）

，但不幸的是，当我单击其中一个按钮时，所有按钮都同时显示和隐藏。我很困惑，我如何才能解决这个问题，并得到预期的结果。 --这是我的代码，你可以查一下

导入“包装：颤振/材料.省道”；
void main（）{
runApp（材料应用程序）(
主页：MyApp（），
));
}
类MyApp扩展了StatefulWidget{
@凌驾
_MyAppState createState（）=>\u MyAppState（）；
}
类MyAppState扩展了状态{
var text1=''；
双重隐藏=1；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：对齐(
对齐：对齐.center，
子：容器(
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
ball（文本：“A”），
ball（文本：“B”），
ball（文本：“C”），
],
),
),
));
}
小部件球（{String text=''''}）{
返回手势检测器(
onTapDown：（tappdown详细信息）{
设置状态（）{
hide=0；
});
},
onTapUp：（TapUpDetails）{
设置状态（）{
hide=1；
});
},
子对象：不透明度(
不透明度：隐藏，
孩子：斜坡(
子：容器(
颜色：颜色，黑色，
宽度：100，
身高：100，
儿童：中心(
子：文本(
文本，
样式：TextStyle(
颜色：颜色，红色，
尺寸：40，
fontWeight:fontWeight.bold，
),
),
),
),
),
),
);
}
}

导入“包装：颤振/材料.飞镖”；
void main（）{
runApp（材料应用程序）(
主页：MyApp（），
));
}
类MyApp扩展了StatefulWidget{
@凌驾
_MyAppState createState（）=>\u MyAppState（）；
}
类MyAppState扩展了状态{
var text1=''；
双hide1=1；
双隐2=1；
双hide3=1；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：对齐(
对齐：对齐.center，
子：容器(
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
球(
0,
正文：“A”，
),
球(
1.
正文：“B”，
),
球(
2.
文本：“C”，
),
],
),
),
));
}
小部件球（双重隐藏，{String text='''}）{
返回手势检测器(
onTapDown：（tappdown详细信息）{
设置状态（）{
如果（隐藏==0）{
hide1=hide1==1？0:1；
}else if（hide==1）{
hide2=hide2==1？0:1；
}否则{
hide3=hide3==1？0:1；
}
});
},
onTapUp：（TapUpDetails细节）{}，
子对象：不透明度(
不透明度：hide==0？hide1:hide==1？hide2:hide3，
孩子：斜坡(
子：容器(
颜色：颜色，黑色，
宽度：100，
身高：100，
儿童：中心(
子：文本(
文本，
样式：TextStyle(
颜色：颜色，红色，
尺寸：40，
fontWeight:fontWeight.bold，
),
),
),
),
),
),
);
}
}

您的问题来自这样一个事实：对于3个球，您只有1个变量

hide

。当你点击其中一个，你会更新这个

hide

参数，这个参数用于3，所以所有的球都是隐藏的

Nilesh提供了一个复制此参数的示例，它可以工作

您还可以将

小部件ball（）

函数转换为有状态小部件，如：

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MaterialApp（home:MyApp（））；
}
类MyApp扩展了StatefulWidget{
@凌驾
_MyAppState createState（）=>\u MyAppState（）；
}
类MyAppState扩展了状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：对齐(
对齐：对齐.center，
子：容器(
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
Ball（文本：“A”），
Ball（文本：“B”），
Ball（文本：“C”），
],
),
),
),
);
}
}
类Ball扩展StatefulWidget{
最终字符串文本；
constball（{Key-Key，this.text}）：super（Key:Key）；
@凌驾
_BallState createState（）=>\u BallState（）；
}
类_BallState扩展了状态{
双重隐藏=1；
@凌驾
小部件构建（构建上下文）{
返回手势检测器(
onTapDown：（tappdown详细信息）{
设置状态（）{
hide=0；
});
},
onTapUp：（TapUpDetails）{
设置状态（）{
hide=1；
});
},
子对象：不透明度(
不透明度：隐藏，
孩子：斜坡(
子：容器(
颜色：颜色，黑色，
宽度：100，
身高：100，
儿童：中心(
子：文本(
widget.text，
样式：TextStyle(
颜色：颜色，红色，
尺寸：40，
fontWeight:fontWeight.bold，
),
),
),
),
),
),
);
}
}

---

在本例中，每个球都有自己的

hide

参数，因此它们不会干扰其他球。

您可以在下面复制粘贴运行完整代码
您可以通过

Modelimport 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var text1 = '';
  double hide1 = 1;
  double hide2 = 1;
  double hide3 = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Align(
      alignment: Alignment.center,
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ball(
              0,
              text: 'A',
            ),
            ball(
              1,
              text: 'B',
            ),
            ball(
              2,
              text: 'C',
            ),
          ],
        ),
      ),
    ));
  }

  Widget ball(double hide, {String text = ''}) {
    return GestureDetector(
      onTapDown: (TapDownDetails details) {
        setState(() {
          if (hide == 0) {
            hide1 = hide1 == 1 ? 0 : 1;
          } else if (hide == 1) {
            hide2 = hide2 == 1 ? 0 : 1;
          } else {
            hide3 = hide3 == 1 ? 0 : 1;
          }
        });
      },
      onTapUp: (TapUpDetails details) {},
      child: Opacity(
        opacity: hide == 0 ? hide1 : hide == 1 ? hide2 : hide3,
        child: ClipOval(
          child: Container(
            color: Colors.black,
            width: 100,
            height: 100,
            child: Center(
              child: Text(
                text,
                style: TextStyle(
                  color: Colors.red,
                  fontSize: 40,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class Model {
  List<double> hide;

  Model({this.hide});
}
...
ball(text: 'A', index: 0, model: model),
ball(text: 'B', index: 1, model: model),
ball(text: 'C', index: 2, model: model),
...
Widget ball({String text = '', int index, Model model}) {
    return GestureDetector(
      onTapDown: (TapDownDetails details) {
        setState(() {
          model.hide[index] = 0;
          print("onTapdwon ${model.hide.toString()}");
        });
      },
      onTapUp: (TapUpDetails details) {
        setState(() {
          model.hide[index] = 1;
          print("onTapUp ${model.hide.toString()}");
        });
      },
      child: Opacity(
        opacity: model.hide[index],

import 'package:flutter/material.dart';

class Model {
  List<double> hide;

  Model({this.hide});
}

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var text1 = '';
  Model model;

  @override
  void initState() {
    model = Model(hide: [1, 1, 1]);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Align(
      alignment: Alignment.center,
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ball(text: 'A', index: 0, model: model),
            ball(text: 'B', index: 1, model: model),
            ball(text: 'C', index: 2, model: model),
          ],
        ),
      ),
    ));
  }

  Widget ball({String text = '', int index, Model model}) {
    return GestureDetector(
      onTapDown: (TapDownDetails details) {
        setState(() {
          model.hide[index] = 0;
          print("onTapdwon ${model.hide.toString()}");
        });
      },
      onTapUp: (TapUpDetails details) {
        setState(() {
          model.hide[index] = 1;
          print("onTapUp ${model.hide.toString()}");
        });
      },
      child: Opacity(
        opacity: model.hide[index],
        child: ClipOval(
          child: Container(
            color: Colors.black,
            width: 100,
            height: 100,
            child: Center(
              child: Text(
                text,
                style: TextStyle(
                  color: Colors.red,
                  fontSize: 40,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}