如何切换从另一个小部件接收的布尔值

Question

我想将布尔初始布尔值作为参数传递给有状态小部件，然后在更新 UI 之外更改其值。就目前而言，我只看到初始值并且无法切换该值。代码及截图如下：

这是我从中传递参数的小部件：

class OtherStuff extends StatefulWidget {
  OtherStuffState createState() => OtherStuffState();
}

class OtherStuffState extends State<OtherStuff> {
  @override
  Widget build(BuildContext context) {
    var provider = Provider.of<ModelClass>(context).data;
    // TODO: implement build
    return Container(
      width: double.infinity,
      height: 150,
      color: Colors.transparent,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: const EdgeInsets.only(left: 5),
            child: const Text('Gets more interested with this', style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 18
            )),
          ),
          SizedBox(height: 5),
          Row(
            children: [
              StuffCards('https://static.toiimg.com/thumb/60892473.cms?imgsize=159129&width=800&height=800', false),   //passing first value as false
              SizedBox(width: 10),
              StuffCards('https://thestayathomechef.com/wp-content/uploads/2016/06/Fried-Chicken-4-1.jpg', true), //passing second value as true
              SizedBox(width: 10),
              StuffCards('https://www.foodrepublic.com/wp-content/uploads/2012/03/033_FR11785.jpg', false), //passing third value as false
            ],
          )
        ],
      )
    );
  }
}

有状态的小部件：

class StuffCards extends StatefulWidget {
  final String imageUrl;
  final bool clickedValue; //receiving the argument

  StuffCards(this.imageUrl, this.clickedValue);

  StuffCardsState createState() => StuffCardsState();
}

class StuffCardsState extends State<StuffCards> {
  @override
  Widget build(BuildContext context) {
    var clicked = widget.clickedValue;

    void clickedFav() {
      setState(() {
        clicked = !clicked;   //toggling the value received
      });
    }

    // TODO: implement build
    return Stack(
      children: [
//        Container(
//          width: 120,
//        ),
        Positioned(
          child: Container(
            width: 110,
            height: 120,
            margin: const EdgeInsets.only(left: 10),
            decoration: BoxDecoration(
                color: Theme.of(context).primaryColorDark,
                borderRadius: const BorderRadius.only(
                    topRight: Radius.circular(100),
                    topLeft: Radius.circular(100),
                    bottomRight: Radius.circular(20),
                    bottomLeft: Radius.circular(20),
                )
            ),
            child: Padding(
              padding: const EdgeInsets.only(top: 60),
              child: Container(
                width: double.infinity,
                height: 60,
                decoration: BoxDecoration(
                  color: Theme.of(context).primaryColorDark,
                ),
                child: Column(
                  children: [
                    Text('Fried Squid', style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.white
                    )),
                    Container(
                      width: 75,
                      color: Colors.transparent,
                      child: Text(
                          '₹ 245', style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                        fontSize: 20
                      )),
                    ),
                    Container(
                      width: double.infinity,
                      height: 16,
                      padding: EdgeInsets.only(right: 2, bottom: 1),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          InkWell(
                            onTap: clickedFav,     //The inkwell doesn't seem to respond and update the UI
                              child: clicked ? Icon(
                                  Icons.favorite,
                                  color: Colors.red,
                                  size: 15
                              ) : Icon(
                                  Icons.favorite_border,
                                  color: Colors.white,
                                  size: 15
                              )
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),

奇怪的是，在单击 Inkwell 小部件时，值确实会发生变化，即如果我单击它并且布尔值为 false，它会更改为 true，但不会变回 false。此外，再次声明，UI 不会更新。

Answer 1

你的用户界面不会改变，因为

StuffCards('https://static.toiimg.com/thumb/60892473.cms?imgsize=159129&width=800&height=800', false),

永远不会改变。当您在 StuffCards 类中调用 setstate 时，小部件会重新生成，但参数相同。

所以你有两个选择

1. 您在 OtherStuffState 类中创建一个函数来切换值，然后将该函数传递给 StuffCards 类，然后在 InkWell 中发生 ontap 事件时调用该函数。
2. 您使用 provider 来存储数据并在模型类中创建一个函数来切换卡片，因此您只需调用 StuffCards 类context.read<ModelClass>().toggleCard(cardNumber)