上下文：

Question

经过几天的搜索，我得到了帮助。我正在处理Flutter应用程序。

上下文：

Json提供的网格视图


-childs：（https://pub.dev/packages/flip_card）中带有Flipcard的GridTile


-在GridTile上点击会出现回调，以获取选定的Item和动画，这是因为翻页卡onTap

我会做什么：

当已预先选择一个项目时（翻转活动挂卡，我们将显示卡片的背面），

然后我选择了网格te的另一项（所以该itme的活动卡也被翻转了）

我想在不重建树的情况下翻转旧的选定项Flipcard，因为我会丢失新选定项的状态。

我尝试了很多事情。例如，我尝试在GridTiles上使用GlobalKey与构建后进行交互，但是当我想与之交互时currentState始终为null。

我想知道在这种情况下有什么好的做法吗？

我希望我很清楚:)（我是法国人）

谢谢社区！

。

有些事情要知道...

可以像这样与活动卡（gridtile的子代）进行交互

(GlobalKey)

GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();

@override
Widget build(BuildContext context) {
  return FlipCard(
    key: cardKey,
    flipOnTouch: false,
    front: Container(
      child: RaisedButton(
        onPressed: () => cardKey.currentState.toggleCard(),
        child: Text('Toggle'),
      ),
    ),
    back: Container(
      child: Text('Back'),
    ),
  );
}

Answer 1

我不确定我是否理解您的问题，但这是一个如何将GridView与FlipCards结合使用的示例：

var cardKeys = Map<int, GlobalKey<FlipCardState>>();
GlobalKey<FlipCardState> lastFlipped;

Widget _buildFlipCard(String text, Color color, int index) {
  return SizedBox(
    height: 120.0,
    child: Card(
      color: color,
      child: Center(
        child:
            Text(text, style: TextStyle(color: Colors.white, fontSize: 20.0)),
      ),
    ),
  );
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("FlipCards")),
    body: GridView.builder(
      itemCount: 20,
      itemBuilder: (context, index) {
        cardKeys.putIfAbsent(index, () => GlobalKey<FlipCardState>());
        GlobalKey<FlipCardState> thisCard = cardKeys[index];
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            FlipCardWithKeepAlive(
              child: FlipCard(
                flipOnTouch: false,
                key: thisCard,
                front: _buildFlipCard("$index", Colors.blue, index),
                back: _buildFlipCard("$index", Colors.green, index),
                onFlip: () {
                  if (lastFlipped != thisCard) {
                    lastFlipped?.currentState?.toggleCard();
                    lastFlipped = thisCard;
                  }
                },
              ),
            ),
            RaisedButton(
              child: Text("Flip Card"),
              onPressed: () => cardKeys[index].currentState.toggleCard(),
            )
          ],
        );
      },
      gridDelegate:
          SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
    ),
  );
}

class FlipCardWithKeepAlive extends StatefulWidget {
  final FlipCard child;

  FlipCardWithKeepAlive({Key key, this.child}) : super(key: key);

  @override
  State<StatefulWidget> createState() => FlipCardWithKeepAliveState();
}

class FlipCardWithKeepAliveState extends State<FlipCardWithKeepAlive>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return widget.child;
  }

  @override
  bool get wantKeepAlive => true;
}

您需要为列表的每个元素使用不同的键，在这种情况下，我使用了Map。

我还用自定义的FlipCard有状态小部件包装了FlipCardWithKeepAlive，该小部件在滚动时使用AutomaticKeepAliveClientMixin使FlipCard保持活动状态。

编辑：我更新了代码，因此当您翻转一张卡片时，翻转的前一张卡片也会被翻转回去。基本上，您需要保存上一张翻转的卡片，翻转一张新卡片时，翻转上一张卡片，然后将新卡片作为最后一张翻转卡片。

如果您希望其中一张卡片等待另一张卡片使用onFlipDone()而不是onFlip()，则代码将使两张卡片同时翻转，例如：

onFlipDone: (isFront) {
  bool isFlipped = !isFront;
  if (isFlipped && lastFlipped != thisCard) {
    lastFlipped?.currentState?.toggleCard();
    lastFlipped = thisCard;
  }
}

Flutter-如何使用FlipCard向后翻转前一张卡

上下文：

我会做什么：

谢谢社区！

有些事情要知道...

1 个答案: