将无状态小部件转换为有状态

Question

我有一个问题，我下载了一个“模板”，我可以在其中导航多张图片（图库），这些图片是无状态的。现在我想将小部件更改为有状态，所以我可以在上面放一个赞按钮。我已经有一个按钮，但它没有注册/做任何事情，因为它是无状态的。我已经尝试过“alt + enter”-> 用我的 ide 转换为有状态的小部件，但这并没有使按钮工作。

class CardScrollWidget extends StatelessWidget {
      var currentPage;
      var padding = 5.0;
      var verticalInset = 23.0;

      CardScrollWidget(this.currentPage);

      @override
      Widget build(BuildContext context) {
        return new AspectRatio(
          aspectRatio: widgetAspectRatio,
          child: LayoutBuilder(builder: (context, contraints) {
            var width = contraints.maxWidth;
            var height = contraints.maxHeight;

            var safeWidth = width - 2 * padding;
            var safeHeight = height - 2 * padding;

            var heightOfPrimaryCard = safeHeight;
            var widthOfPrimaryCard = heightOfPrimaryCard * cardAspectRatio;

            var primaryCardLeft = safeWidth - widthOfPrimaryCard;
            var horizontalInset = primaryCardLeft / 2;

            List<Widget> cardList = new List();

            for (var i = 0; i < images.length; i++) {
              var delta = i - currentPage;
              bool isOnRight = delta > 0;

              var start = padding +
                  max(
                      primaryCardLeft -
                          horizontalInset * -delta * (isOnRight ? 15 : 1),
                      0.0);

              var cardItem = Positioned.directional(
                top: padding + verticalInset * max(-delta, 0.0),
                bottom: padding + verticalInset * max(-delta, 0.0),
                start: start,
                textDirection: TextDirection.rtl,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(16.0),
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white, boxShadow: [
                      BoxShadow(
                          color: Colors.black12,
                          offset: Offset(3.0, 6.0),
                          blurRadius: 10.0)
                    ]),
                    child: AspectRatio(
                      aspectRatio: cardAspectRatio,
                      child: Stack(
                        fit: StackFit.expand,
                        children: <Widget>[
                          Image.asset(images[i], fit: BoxFit.cover),
                          Align(
                            alignment: Alignment.bottomLeft,
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Padding(
                                  padding: EdgeInsets.symmetric(
                                      horizontal: 16.0, vertical: 8.0),

                                ),
                                SizedBox(
                                  height: 10.0,
                                ),
                                Padding(
                                  padding: const EdgeInsets.only(
                                      left: 12.0, bottom: 12.0),
                                  child: Container(
                                    padding: EdgeInsets.symmetric(
                                        horizontal: 22.0, vertical: 6.0),
                                    decoration: BoxDecoration(
                                        color: Colors.blueAccent,
                                        borderRadius: BorderRadius.circular(20.0)),
                                    child: Text("Like",
                                        style: TextStyle(color: Colors.white)),
                                  ),
                                )
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              );
              cardList.add(cardItem);
            }
            return Stack(
              children: cardList,
            );
          }),
        );
      } 
    }

Answer 1

要让你的按钮做某事，你必须给它添加一个点击动作。对于它，您可以使用 InkWell 或 GestureDetector 小部件包装它，如下所示：

InkWell(
    onTap: () {
      // your action here
      print('clicked');
    },
    child: Container(
      padding: EdgeInsets.symmetric(horizontal: 22.0, vertical: 6.0),
      decoration: BoxDecoration(color: Colors.blueAccent, borderRadius: BorderRadius.circular(20.0)),
      child: Text("Like", style: TextStyle(color: Colors.white)),
    ),
),