我怎样才能单独 Show/Hide 多个按钮只使用一个功能？

Question

我在列小部件中排列了三个按钮，我希望它们在我单击 OnTapDown() 时单独隐藏，并在按下其中一个按钮时在 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

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 2

您的问题来自于 3 个球只有 1 个变量 hide。当你点击一个时，你更新了这个用于 3 的 hide 参数，所以所有的球都被隐藏了。

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

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

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

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

Answer 3

您可以复制粘贴运行下面的完整代码
您可以通过 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,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

我怎样才能单独 Show/Hide 多个按钮只使用一个功能？

How can I individually Show/Hide multiple buttons using only one function?

dart

flutter

flutter-test

flutter-layout