將無狀態小部件轉換為有狀態

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