flutter - 重复多次子:GestureDetector

Question

我创建了此代码，但我想拥有4x4的翻转卡，您能告诉我该怎么做吗？请
下面的代码是否可以帮助我谢谢你。
我想重复GestureDetector 4 x 4。
在新的flip_card.dart文件中。
下面的代码是否可以帮助我谢谢你。
我想重复GestureDetector 4 x 4。
在新的flip_card.dart文件中。
如果您可以逐步向我解释，我是新手。谢谢。

import 'dart:math' as math;
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:async';

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  bool _flag = true;
  Color _color = Colors.blue;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
        vsync: this, duration: Duration(milliseconds: 200), value: 1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: GestureDetector(
          onTap: flip,
          child: AnimatedBuilder(
            animation: _controller,
            builder: (context, child) {
              return Transform(
                transform:
                    Matrix4.rotationY((1 - _controller.value) * math.pi / 2),
                alignment: Alignment.center,
                child: Container(
                  height: 70,
                  width: 70,
                  margin: EdgeInsets.symmetric(horizontal: 20),
                  padding: EdgeInsets.symmetric(vertical: 12),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: _color.withOpacity(0.2),
                      border: Border.all(color: Colors.grey)),
                  child: _flag
                      ? Text(
                          'Carte A',
                          textScaleFactor: 1,
                          textAlign: TextAlign.center,
                        )
                      : Image.asset('assets/gold.png'),
                ),
              );
            },
          ),
        ),
      ),
    );
  }

  void flip() async {
    if (!_flag) {
      return;
    }
    if (_flag) {
      await _controller.reverse();
      setState(() {
        _color = Colors.orange;
      });
      await _controller.forward();
    } else {
      await _controller.reverse();
      setState(() {
        _color = Colors.blue;
      });
      await _controller.forward();
    }
    setState(() {
      _flag = !_flag;
    });

    Timer timer = new Timer(new Duration(seconds: 2), () async {
      if (_flag) {
        await _controller.reverse();
        setState(() {
          _color = Colors.orange;
        });
        await _controller.forward();
      } else {
        await _controller.reverse();
        setState(() {
          _color = Colors.blue;
        });
        await _controller.forward();
      }

      setState(() {
        _flag = !_flag;
      });
    });
  }
}

Answer 1

您可以使用flip_card package:
1. 将依赖项添加到pubspec依赖项中:

flip_card: ^0.4.4

2. 导入软件包:

import 'package:flip_card/flip_card.dart';

3. 创建一个 GridView， crossAxisCount为4。这是每行中的纸牌数量。
4. 使用 List.generate(16, ...您可以制作16张卡片(进行4 * 4布局)。
5. 每个 FlipCard都有一个 front和一个 back。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: GridView.count(
              childAspectRatio: 1.5,
              crossAxisCount: 4,
              mainAxisSpacing: 10,
              children: List.generate(16, (index) {
                return FlipCard(
                  front: Container(
                      height: 70,
                      width: 70,
                      margin: EdgeInsets.symmetric(horizontal: 20),
                      padding: EdgeInsets.symmetric(vertical: 12),
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: _color.withOpacity(0.2),
                          border: Border.all(color: Colors.grey)),
                      child: Text(
                        'Carte A',
                        textScaleFactor: 1,
                        textAlign: TextAlign.center,
                      )),
                  back: Container(
                    height: 70,
                    width: 70,
                    margin: EdgeInsets.symmetric(horizontal: 20),
                    padding: EdgeInsets.symmetric(vertical: 12),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: _color.withOpacity(0.2),
                        border: Border.all(color: Colors.grey)),
                    child: Image.asset('assets/gold.png'),
                  ),
                );
              }))),
    );
  }

结果:

更新:这是一种解决方案，可以使每张卡片 在两秒钟后向后翻转(基于以下注释):

  List<GlobalKey<FlipCardState>> keys = [];
  
  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 16; i++) {
      GlobalKey<FlipCardState> cardKey = new GlobalKey<FlipCardState>();
      keys.add(cardKey);
    }

  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: GridView.count(
              childAspectRatio: 1.5,
              crossAxisCount: 4,
              mainAxisSpacing: 10,
              children: List.generate(16, (index) {
                return FlipCard(
                  key: keys[index],
                  onFlip: () async {
                    await new Future.delayed(const Duration(seconds : 2)) .then((value) => {
                      if (!keys[index].currentState.isFront)
                        keys[index].currentState.toggleCard()
                    });
                  },
                  front: Container(
                      height: 70,
                      width: 70,
                      margin: EdgeInsets.symmetric(horizontal: 20),
                      padding: EdgeInsets.symmetric(vertical: 12),
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: _color.withOpacity(0.2),
                          border: Border.all(color: Colors.grey)),
                      child: Text(
                        'Carte A',
                        textScaleFactor: 1,
                        textAlign: TextAlign.center,
                      )),
                  back: Container(
                    height: 70,
                    width: 70,
                    margin: EdgeInsets.symmetric(horizontal: 20),
                    padding: EdgeInsets.symmetric(vertical: 12),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: _color.withOpacity(0.2),
                        border: Border.all(color: Colors.grey)),
                    child: Image.asset('assets/images/person.png'),
                  ),
                );
              }))),
    );
  }