有没有一种方法可以通过单击其双胞胎来更改小部件的高度？

Question

我有一个简单的 class 创建的卡片，当我点击它们时会展开，当我再次点击它们时会收缩。是否可以确保当一个扩展时其他自动收缩？感谢任何愿意回答我的人。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: IlMioTema(),
      home: PageOne(),
    );
  }
}

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: arancio4,
          title: Text('Hercules'),
        ),
        body: Container(
      child: SingleChildScrollView(
          padding: EdgeInsets.only(top: 85, left: 15, right: 15, bottom: 15),
          child: Column(
            children: <Widget>[
              CardDue(titolo:'ONE', colore1: blu1),
              CardDue(titolo:'TWO', colore1: Tiffanycolor),
              CardDue(titolo:'THREE', colore1: Tiffanycolor),
            ],
          )
      ),
    ),
);
  }
}

class CardDue extends StatefulWidget{
  final String titolo;
  final Color colore1;

  CardDue({Key key, this.titolo, this.colore1}): super(key:key);

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

class _CardDueState extends State<CardDue> {
double height = 120;
@override
  Widget build(BuildContext context)  {
    return GestureDetector(
        onTap: () {
          setState(() {
            selected = !selected;
          });
          if (!selected) {
            setState(() {
              height = 120;
            });
          } else {
           setState(() {
             altezza = 400;
           });
          }
    },
    child: AnimatedContainer(
      height: height,
      duration: Duration(milliseconds: 350),
      curve: Curves.decelerate,
      margin: EdgeInsets.only(top: 10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(selected ? 0 : 10),
        color: widget.colore1,
      ),
      child: ...

它可以正确修改自身，但我无法重置另一个 CardDue 的高度。有没有办法更改单个小部件状态或者它可以与 sharedpreference 一起使用？感谢任何能帮助我的人

Answer 1

改变其中一张卡片高度的方法是单独定义函数。这是我所做的：

我将 PageOne class 转换为有状态小部件，将 CardDue class 转换为无状态小部件。
CardDue 在构造函数中有两个额外的参数，需要一个 function 和一个 bool变量。

为什么我这样做了？

每个 CardDue class 都有一个单独的 bool 变量，确保只有其中一个为真。如果为真，我们只需将其他两个 bool 变量设置为 false.

代码如下：

class PageOne extends StatefulWidget {
  @override
  _PageOneState createState() => _PageOneState();
}

class _PageOneState extends State<PageOne> {
  
  bool card1 = false;
  bool card2 = false;
  bool card3 = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // backgroundColor: arancio4,
        title: Text('Hercules'),
      ),
      body: Container(
        child: SingleChildScrollView(
            padding: EdgeInsets.only(top: 85, left: 15, right: 15, bottom: 15),
            child: Column(
              children: <Widget>[
                CardDue(
                    titolo: 'ONE',
                    colore1: Colors.red,
                    selected: card1,
                    function: () {
                      setState(() {
                        card1 = !card1;
                        card2 = false;
                        card3 = false;
                      });
                    }),
                CardDue(
                    titolo: 'TWO',
                    colore1: Colors.blue,
                    selected: card2,
                    function: () {
                      setState(() {
                        card2 = !card2;
                        card1 = false;
                        card3 = false;
                      });
                    }),
                CardDue(
                    titolo: 'THREE',
                    colore1: Colors.yellow,
                    selected: card3,
                    function: () {
                      setState(() {
                        card3 = !card3;
                        card2 = false;
                        card1 = false;
                      });
                    }),
              ],
            )),
      ),
    );
  }
}

class CardDue extends StatelessWidget {
  final String titolo;
  final Color colore1;
  final bool selected;
  final Function function;

  CardDue({Key key, this.titolo, this.colore1, this.selected, this.function})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: function,
        child: AnimatedContainer(
          height: selected ? 400 : 120,
          duration: Duration(milliseconds: 350),
          curve: Curves.decelerate,
          margin: EdgeInsets.only(top: 10),
          decoration: BoxDecoration(
       borderRadius: BorderRadius.circular(selected ? 0 : 10),
            color: colore1,
          ),
        ));
  }
}

让我知道这是否有效。

有没有一种方法可以通过单击其双胞胎来更改小部件的高度？

Is there a method to change the height of a widget by clicking on its twin?

flutter

flutter-animation