首页 > 解决方案 > Flutter - 按下按钮进行刷卡

问题描述

所以我正在使用 TinderSwapCard,swipeCompleteCallback 运行良好,我只想添加 2 个按钮,通过按下按钮来获得相同的滑动动画。

我该怎么做?

提前致谢。

应用程序的图片

这是使用的代码:

new TinderSwapCard(
                    orientation: AmassOrientation.TOP,
                    swipeUp: false,
                    swipeDown: false,
                    totalNum: list.length,
                    stackNum: 4,
                    maxHeight: MediaQuery.of(context).size.width*1.7,
                    maxWidth: MediaQuery.of(context).size.width*0.9,
                    minHeight: MediaQuery.of(context).size.width*0.9,
                    minWidth: MediaQuery.of(context).size.width*0.6,
                    cardBuilder: (context,index)=>Card(
                      color: Colors.black,
                      child: Column(
                        children: [
                              new Image.asset(
                              list[index],
                              fit: BoxFit.fill,
                              ),
                              Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              RawMaterialButton(
                                fillColor: Colors.white,
                                child: FaIcon(FontAwesomeIcons.times,size: 50.0,color: Colors.red,),
                                shape: CircleBorder(),
                                padding: const EdgeInsets.all(8.0),
                                onPressed: (){
                                  //what to do here ?
                              },),
                              RawMaterialButton(
                                fillColor: Colors.white,
                                child: FaIcon(FontAwesomeIcons.solidHeart,size: 50.0,color: Colors.green,),
                                shape: CircleBorder(),
                                padding: const EdgeInsets.all(8.0),
                                onPressed: (){
                                //what to do here ?
                              },),

                              ],
                          ),
                              
                            ],
                      ),
            ),
     swipeCompleteCallback: (CardSwipeOrientation orientation,int index){
      if (orientation == CardSwipeOrientation.LEFT){
            print("left");

          }
           
          if (orientation == CardSwipeOrientation.RIGHT){
            
            print("Right" );
            
          }
       }
            
    );

标签: androidflutterflutter-animationcard

解决方案


在您的构建方法上方添加:

CardController cardController = new CardController();

然后在您的 TinderSwapCard() 小部件中添加控制器:

TinderSwapCard(
  cardController: cardController,
)

最后将其添加到您的按钮中:

RawMaterialButton(
  fillColor: Colors.white,
  child: Icon(Icons.delete, size: 50.0,color: Colors.red,),
  shape: CircleBorder(),
  padding: const EdgeInsets.all(8.0),
  onPressed: (){
    cardController.triggerLeft();
  },
),
RawMaterialButton(
  fillColor: Colors.white,
  child: Icon(Icons.thumb_up,size: 50.0,color: Colors.green,),
  shape: CircleBorder(),
  padding: const EdgeInsets.all(8.0),
  onPressed: (){
    cardController.triggerRight();
  },
),

推荐阅读