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

Question

在这里，我在 Column 小部件中排列了三个按钮，我希望它们在我单击OnTapDown()时单独隐藏，并在按下其中一个按钮时在onTapUp()上onTapUp()显示但不幸的是，当我单击其中一个按钮时，它们全部显示并立即隐藏。 我很困惑如何解决这个问题并获得所需的结果。 - 这是我的代码，您可以检查。

import '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 hide = 1;

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

  Widget ball({String text = ''}) {
    return GestureDetector(
      onTapDown: (TapDownDetails details) {
        setState(() {
          hide = 0;
        });
      },
      onTapUp: (TapUpDetails details) {
        setState(() {
          hide = 1;
        });
      },
      child: Opacity(
        opacity: hide,
        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,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以在下面复制粘贴运行完整代码
您可以通过Model和index
您可以在下面看到工作演示
代码片段

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

Answer 2

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

Answer 3

您的问题来自这样一个事实，即 3 个球只有 1 个可变hide 。 当您单击一个时，您会更新此hide参数，该参数用于 3，因此所有球都被隐藏。

Nilesh 提供了一个复制此参数的示例，它有效。

您还可以将Widget ball()函数转换为 Stateful 小部件，例如：

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.center,
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Ball(text: 'A'),
              Ball(text: 'B'),
              Ball(text: 'C'),
            ],
          ),
        ),
      ),
    );
  }
}

class Ball extends StatefulWidget {
  final String text;

  const Ball({Key key, this.text}) : super(key: key);

  @override
  _BallState createState() => _BallState();
}

class _BallState extends State<Ball> {
  double hide = 1;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (TapDownDetails details) {
        setState(() {
          hide = 0;
        });
      },
      onTapUp: (TapUpDetails details) {
        setState(() {
          hide = 1;
        });
      },
      child: Opacity(
        opacity: hide,
        child: ClipOval(
          child: Container(
            color: Colors.black,
            width: 100,
            height: 100,
            child: Center(
              child: Text(
                widget.text,
                style: TextStyle(
                  color: Colors.red,
                  fontSize: 40,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在本例中，每个球都有自己的hide参数，因此它们不会干扰其他球。