我正在玩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: [
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: [
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"); .
有人可以帮助我,以便当我点击卡片时图像会发生变化吗?