我有一个在 android studio 中使用 flutter 的抽认卡应用程序，我是 android studio 和 flutter 的新手。所以每次用户翻转时，它都会显示卡片的背面。如果在用户按下下一步按钮时卡片显示背面，则卡片会自动显示后续卡片的背面。我想做的只是在每次用户按下下一步按钮时显示正面。

I have 3 classes, a flip_card.dart [my animations], Flash.dart [buttons, widgets, front/back image lists, etc.], main.dart [main, only calls the class].

I do not know what to do, either call the animation when it is played to a function? or to call a local "bool isFront" inside the animation when it is played. 

this is my whole flip_dart.dart

library flip_card;

import 'dart:math';
import 'package:flutter/material.dart';
import 'Flash.dart';

enum FlipDirection {
  VERTICAL,
  HORIZONTAL,
}

class AnimationCard extends StatelessWidget {
  AnimationCard({this.child, this.animation, this.direction});

  final Widget child;
  final Animation<double> animation;
  final FlipDirection direction;

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animation,
      builder: (BuildContext context, Widget child) {
        var transform = Matrix4.identity();
        transform.setEntry(3, 2, 0.001);
        if (direction == FlipDirection.VERTICAL) {
          transform.rotateX(animation.value);
        } else {
          transform.rotateY(animation.value);
        }
        return Transform(
          transform: transform,
          alignment: Alignment.center,
          child: child,
        );
      },
      child: child,
    );
  }
}

class FlipCard extends StatefulWidget {
  final Widget front;
  final Widget back;
  final int speed = 500;
  final FlipDirection direction;

  const FlipCard(
      {Key key,
        @required this.front,
        @required this.back,
        this.direction = FlipDirection.HORIZONTAL})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _FlipCardState();
  }
}

class _FlipCardState extends State<FlipCard>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> _frontRotation;
  Animation<double> _backRotation;

  bool isFront = true;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: Duration(milliseconds: widget.speed), vsync: this);
    _frontRotation = TweenSequence(
      <TweenSequenceItem<double>>[
        TweenSequenceItem<double>(
          tween: Tween(begin: 0.0, end: pi / 2)
              .chain(CurveTween(curve: Curves.linear)),
          weight: 50.0,
        ),
        TweenSequenceItem<double>(
          tween: ConstantTween<double>(pi / 2),
          weight: 50.0,
        ),
      ],
    ).animate(controller);
    _backRotation = TweenSequence(
      <TweenSequenceItem<double>>[
        TweenSequenceItem<double>(
          tween: ConstantTween<double>(pi / 2),
          weight: 50.0,
        ),
        TweenSequenceItem<double>(
          tween: Tween(begin: -pi / 2, end: 0.0)
              .chain(CurveTween(curve: Curves.linear)),
          weight: 50.0,
        ),
      ],
    ).animate(controller);
  }

  _toggleCard() {
    if (isFront) {
      controller.forward();
//      if(_nextImage()){
//
//      }
    } else {
      controller.reverse();
    }
    isFront = !isFront;
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _toggleCard,
      child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          AnimationCard(
            animation: _frontRotation,
            child: widget.front,
            direction: widget.direction,
          ),
          AnimationCard(
            animation: _backRotation,
            child: widget.back,
            direction: widget.direction,
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}



And this is my Flash.dart 
import 'flip_card.dart';
import 'package:flutter/material.dart';

class Flashcard extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<Flashcard> {
  int photoIndex = 0;  //startfirstpage
  bool isFront = true;
  var playerProgress = 0;
  List<String> photos = [ //front

    'assets/c1v1f.png',
    'assets/c1v2f.png',
    'assets/c1v3f.png',
    'assets/c1v4f.png',
    'assets/c1v5f.png',
    'assets/c1v6f.png',
    'assets/c1v7f.png',
    'assets/c1v8f.png',
    'assets/c1v9f.png',
    'assets/c1v10f.png',

  ];

  List<String> photos1 = [ //back

    'assets/c1v1b.png',
    'assets/c1v2b.png',
    'assets/c1v3b.png',
    'assets/c1v4b.png',
    'assets/c1v5b.png',
    'assets/c1v6b.png',
    'assets/c1v7b.png',
    'assets/c1v8b.png',
    'assets/c1v9b.png',
    'assets/c1v10b.png',

  ];
  var bookmarkicon = "assets/bookmarkoff.png";
  var bookmarkOff = "assets/bookmarkoff.png";
  var bookmarkOn = "assets/bookmarkon.png";

  void _previousImage() { // prev
    setState(() {
      photoIndex = photoIndex > 0 ? photoIndex - 1 : 0;
    });
  }

  void _nextImage() {
    // next
      setState(() {
        photoIndex = photoIndex < photos.length - 1 ? photoIndex + 1 : photoIndex;
        playerProgress += 10;
        print(playerProgress);
        print(photoIndex);
//      if(isFront){
//        photoIndex--;
//      }
      Flashcard();
      });
    }

  @override
  Widget build(BuildContext context) {
    return new Scaffold( //title_page
        appBar: new AppBar(
          title: new Text('Category 時'),
          centerTitle: true,
        ),
        body: Column( //content

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Center(
              child: Stack(
                children: <Widget>[
                  Container(

                    child: FlipCard(
                      direction: FlipDirection.HORIZONTAL,
                      front: Material( //front_side
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(25.0),
                              image: DecorationImage(
                                  image: AssetImage(photos[photoIndex]), //images front
                                  fit: BoxFit.cover)),
                        ),
                        elevation: 20.0,
                        borderRadius: BorderRadius.all(Radius.circular(40.0)),
                      ),
                      back: Material( //back_side
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(25.0),
                              image: DecorationImage(
                                  image: AssetImage(photos1[photoIndex]), // images back
                                  fit: BoxFit.cover)),
                        ),
                        elevation: 20.0,
                        borderRadius: BorderRadius.all(Radius.circular(40.0)),
                      ),
                    ),

                    height: 400.0,//flashcard
                    width: 370.0,


                  ),
                  Positioned(
                    top: 380.0, //dots
                    left: 25.0,
                    right: 25.0,
                    child: SelectedPhoto(numberOfDots: photos.length, 
                   photoIndex: photoIndex),
                  )
                ],
              ),
            ),
            Row(

              mainAxisAlignment: MainAxisAlignment.center,

              children: <Widget>[
                RaisedButton(
                  child: Text('Prev', textScaleFactor: 1.3,),
                  onPressed: _previousImage,
                  elevation: 10.0,
                  color: Colors.redAccent,
                  textColor: Colors.white,
                ),
                SizedBox(width: 10.0), //space
                ButtonTheme( //bookmark
                  minWidth: 10,
                  height: 10,
                  child: RaisedButton(
                    child: Image.asset(bookmarkicon, scale: 3.5,),
                    color: Colors.transparent,
                    onPressed: (){
                      if(this.bookmarkicon=='assets/bookmarkoff.png'){
                        print(this.bookmarkicon +" is clicked");
                        setState(() {
                          bookmarkicon = bookmarkOn;
                        });
                        this.bookmarkicon = 'assets/bookmarkon.png';

                      }
                      else if(this.bookmarkicon=='assets/bookmarkon.png'){
                        print(this.bookmarkicon +" is clicked");
                        this.bookmarkicon = 'assets/bookmarkoff.png';
                        setState(() {
                          bookmarkicon = bookmarkOff;
                        });
                      }
                      //any implementation for bookmark will be here ;)
                    },

                  ),
                ),
                SizedBox(width: 10.0), //space
                RaisedButton(
                  child: Text('Next', textScaleFactor: 1.3,),
                  onPressed:_nextImage,
                  elevation: 10.0,
                  color: Colors.redAccent,
                  textColor: Colors.white,
                )
              ],
            )
          ],
        ));
  }
}

class SelectedPhoto extends StatelessWidget {

  final int numberOfDots;
  final int photoIndex;

  SelectedPhoto({this.numberOfDots, this.photoIndex});

  Widget _inactivePhoto() {
    return new Container(
        child: new Padding(
          padding: const EdgeInsets.only(left: 3.0, right: 3.0),
          child: Container(
            height: 8.0,
            width: 8.0,
            decoration: BoxDecoration(
                color: Colors.grey,
                borderRadius: BorderRadius.circular(4.0)
            ),
          ),
        )
    );
  }

  Widget _activePhoto() {
    return Container(
      child: Padding(
        padding: EdgeInsets.only(left: 3.0, right: 3.0),
        child: Container(
          height: 10.0,
          width: 10.0,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(5.0),
              boxShadow: [
                BoxShadow(
                    color: Colors.grey,
                    spreadRadius: 0.0,
                    blurRadius: 2.0
                )
              ]
          ),
        ),
      ),
    );
  }

  List<Widget> _buildDots() {
    List<Widget> dots = [];

    for(int i = 0; i< numberOfDots; ++i) {
      dots.add(
          i == photoIndex ? _activePhoto(): _inactivePhoto()
      );
    }

    return dots;
  }


  @override
  Widget build(BuildContext context) {
    return new Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: _buildDots(),
      ),
    );
  }
}

代码有效，但是当用户按下下一个时，它会显示下一张卡片，即使它是背面显示的。

最佳答案

下面是我添加到我的代码中的内容，以确保每次用户决定查看下一张卡片时，它都会显示下一张卡片的正面，而不是背面:

首先我定义了一个全局变量:

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

然后它被传递给flip_card package 的key 属性:

FlipCard(
          key: cardKey,

然后我使用变量来检查卡片的状态是显示卡片的正面还是背面，如果显示背面然后单击“时将切换为显示下一张卡片的正面下一张卡片按钮”:

onPressed: () {
            if(cardKey.currentState != null) { //null safety
              if (!cardKey.currentState!.isFront) {
                cardKey.currentState!.toggleCard();
              }
            }
            
          },

添加到“下一张卡片”按钮的 onPressed 属性。

关于android - 仅在使用 flip_card 依赖项 [FLUTTER] 按下闪存卡应用程序的 nextButton 时显示正面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56352437/