按下按钮时动画文本转换

Question

我有 3 种类型的报价。当按下相应的按钮时，如果从类别 1 到类别 2 再到类别 3，报价就会消失，反之亦然。

但是，即使它们来自同一类别，我也想让引用消失。现在，当引用来自不同类别时，它会消失。

如何才能做到这一点？谢谢

我认为这与按钮有关。例如。当按下猫 1 的按钮时，猫 1 的引用的不透明度将变为零，然后返回到 1（持续时间为一秒）。 但我不知道该怎么写。

下面附有此操作中涉及的主要代码块：

  double opacity1 = 0.0;
  double opacity2 = 0.0;
  double opacity3 = 0.0;

String quoteCat1 = List1[Random().nextInt(List1.length)];

  void generateConvoTopic1() {
    setState(() {
      quoteCat1 = List1[Random().nextInt(List1.length)];
    });
  }

  String quoteCat2 = List2[Random().nextInt(List2.length)];

  void generateConvoTopic2() {
    setState(() {
      convoTopic2 = List2[Random().nextInt(List2.length)];
    });
  }

  String quoteCat3 = List3[Random().nextInt(List3.length)];

  void generateConvoTopic3() {
    setState(() {
      quoteCat3 = List3[Random().nextInt(List3.length)];
    });
  }

 @override
  Widget build(BuildContext context) {
   
    return Scaffold(

...

body: ...

///Following are where the quotes are stacked. But they take  turns to show their opacity.

Stack(children: <Widget>[
              
                AnimatedOpacity(
                    opacity: opacity1,
                    duration: Duration(seconds: 1),
                    child:Text(quoteCat1),
                   
                AnimatedOpacity(
                    opacity: opacity2,
                    duration: Duration(seconds: 1),
                    child: Text(quoteCat2),
                  
                AnimatedOpacity(
                    opacity: opacity3,
                    duration: Duration(seconds: 1),
                    child: Text(quoteCat3),
                   
              ]),

...

///Following are the buttons to trigger the respective quotes' opacity

ElevatedButton(

...
onPressed: () {
                      generatequoteCat1();
                      opacity1 = 1.0;
                      opacity2 = 0.0;
                      opacity3 = 0.0;
                    },),
ElevatedButton(

...
onPressed: () {
                      generatequoteCat2();
                      opacity2 = 1.0;
                      opacity1 = 0.0;
                      opacity3 = 0.0;
                    },),
ElevatedButton(

...
onPressed: () {
                      generatequoteCat3();
                      opacity3 = 1.0;
                      opacity1 = 0.0;
                      opacity2 = 0.0;
                    },),
...

Answer 1

double opacity1 = 1.0;
double opacity2 = 0.0;
double opacity3 = 0.0;

String quoteCat1 = List1[Random().nextInt(List1.length)];

void generateConvoTopic1() {
  setState(() {
    quoteCat1 = List1[Random().nextInt(List1.length)];
  });
}

String quoteCat2 = List2[Random().nextInt(List2.length)];

void generateConvoTopic2() {
  setState(() {
    quoteCat2 = List2[Random().nextInt(List2.length)];
  });
}

String quoteCat3 = List3[Random().nextInt(List3.length)];

void generateConvoTopic3() {
  setState(() {
    quoteCat3 = List3[Random().nextInt(List3.length)];
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: <Widget>[
        AnimatedOpacity(
          opacity: opacity1,
          duration: Duration(seconds: 1),
          child: Text(quoteCat1),
        ),
        AnimatedOpacity(
          opacity: opacity2,
          duration: Duration(seconds: 1),
          child: Text(quoteCat2),
        ),
        AnimatedOpacity(
          opacity: opacity3,
          duration: Duration(seconds: 1),
          child: Text(quoteCat3),
        ),
      ],
    ),
    ElevatedButton(
      onPressed: () {
        generateConvoTopic1();
        setState(() {
          opacity1 = 1.0;
          opacity2 = 0.0;
          opacity3 = 0.0;
        });
      },
      child: Text("Category 1"),
    ),
    ElevatedButton(
      onPressed: () {
        generateConvoTopic2();
        setState(() {
          opacity1 = 0.0;
          opacity2 = 1.0;
          opacity3 = 0.0;
        });
      },
      child: Text("Category 2"),
    ),
    ElevatedButton(
      onPressed: () {
        generateConvoTopic3();
        setState(() {
          opacity1 = 0.0;
          opacity2 = 0.0;
          opacity3 = 1.0;
        });
      },
      child: Text("Category 3"),
    ),
  );
}