Question

我正在玩flip_card package（此包装会创建一张卡片，当您点击时，它将翻转卡片并显示卡片的正面或背面）。我想做的是，每次点击卡片时都显示不同的图像，卡片翻转到正面。

为此，我将flip_card example修改为有状态的小部件，并使用GestureDetector来检测点击：

_renderContent(context) {
    return Card(
      elevation: 0.0,
      margin: EdgeInsets.only(left: 32.0, right: 32.0, top: 10.0, bottom: 0.0),
      color: Color(0x00000000),
      child: FlipCard(
        direction: FlipDirection.HORIZONTAL,
        front: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: _tapHandler,
          child: Container(
            decoration: BoxDecoration(
                color: Color(0xFF006666),
                borderRadius: BorderRadius.all(Radius.circular(8.0)),
                boxShadow: [BoxShadow(blurRadius: 15.0, spreadRadius: 0.8)],
                image: DecorationImage(
                  image: AssetImage(_cards[_cardInd]),
                  fit: BoxFit.cover,
                )),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Back', style: Theme.of(context).textTheme.headline),
                Text('Click here to flip front',
                    style: Theme.of(context).textTheme.body1),
              ],
            ),
          ),
        ),
        back: Container(
          decoration: BoxDecoration(
              color: Color(0xFF006666),
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              boxShadow: [BoxShadow(blurRadius: 15.0, spreadRadius: 0.8)],
              image: DecorationImage(
                image: AssetImage(_cards[0]),
                fit: BoxFit.cover,
              )),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Back', style: Theme.of(context).textTheme.headline),
              Text('Click here to flip front',
                  style: Theme.of(context).textTheme.body1),
            ],
          ),
        ),
      ),
    );
  }

而tapHandler函数是：

void _tapHandler() {
    setState(() {
      _cardInd = x.nextInt(_cards.length); 
    });
    print("_cardInd $_cardInd"); 
  }

_cardInd是图像资产列表_cards的索引。但是，GestureDetector不起作用。屏幕上既没有图像更改也不打印print("_cardInd $_cardInd");。

有人可以帮助我，以便当我点击卡片时图像发生变化吗？

我的颤动代码中的GestureDetector无法正常工作

0 个答案: