Как я могу индивидуально отображать / скрывать несколько кнопок, используя только одну функцию?

Здесь у меня есть три кнопки, выстроенные в линию в виджете «Столбец», и я хочу, чтобы они скрывались индивидуально, когда я нажимаю 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,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Всего 3 ответа

Автоматический диспенсер мыльной пены от xiaomi.


Вы можете скопировать и вставить полный код ниже
Вы можете передать 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],

рабочая демонстрация

enter image description here

полный код

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

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

Ваша проблема возникает из-за того, что у вас есть только 1 переменная hide для 3 мячей. Когда вы нажимаете на один, вы обновляете этот параметр hide, который используется для 3, поэтому все шары скрыты.

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

В этом примере у каждого шара есть собственный параметр hide, поэтому они не будут мешать другим.


Есть идеи?

10000