首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >使用flip_card依赖项按下闪存卡应用程序的nextButton时仅显示正面[FLUTTER]

使用flip_card依赖项按下闪存卡应用程序的nextButton时仅显示正面[FLUTTER]
EN

Stack Overflow用户
提问于 2019-05-29 10:50:29
回答 2查看 241关注 0票数 3

我在android studio中有一个使用flutter的抽认卡应用程序,我是android studio和flutter的新手。因此,用户每次翻转时,都会显示卡片的背面。如果在用户按下next按钮时卡片显示背面,则卡片会自动显示前面的卡片的背面。我想要做的是在用户每次按下next按钮时只显示正面。

代码语言:javascript
代码运行次数:0
运行
复制
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(),
      ),
    );
  }
}

代码可以工作,但当用户按下next时,它将显示下一张牌,即使它是背面显示的。

EN

回答 2

Stack Overflow用户

发布于 2021-07-15 21:07:47

因此,我在代码中添加了以下内容,以确保每次用户决定查看下一张牌时,它都会显示下一张牌的正面,而不是背面:

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

代码语言:javascript
代码运行次数:0
运行
复制
  GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();

然后将其传递给flip_card packagekey属性

代码语言:javascript
代码运行次数:0
运行
复制
FlipCard(
          key: cardKey,

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

代码语言:javascript
代码运行次数:0
运行
复制
onPressed: () {
            if(cardKey.currentState != null) { //null safety
              if (!cardKey.currentState!.isFront) {
                cardKey.currentState!.toggleCard();
              }
            }
            
          },

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

票数 1
EN

Stack Overflow用户

发布于 2019-05-29 14:51:17

不要紧,我只是把它变成了一个.dart,把我的动画控制器变成了全局的,并在每次按下下一步按钮时访问.reverse()。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56352437

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档