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

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 13:07:47

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

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

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

然后将其传递给flip_card packagekey属性

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

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

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

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

票数 1
EN

Stack Overflow用户

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

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

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

https://stackoverflow.com/questions/56352437

复制
相关文章
前端基础-json-server与axios
一个项目从立项开始,一般都是前后端同时进行编码工作的,而此时前端需要的接口和数据后台都是无法提供的;
cwl_java
2020/03/26
9100
【axios】使用json-server 搭建REST API
1.1 API 的分类 REST API: restful (Representational State Transfer (资源)表现层状态转化) (1) 发送请求进行CRUD 哪个操作由请求方式来决定 (2) 同一个请求路径可以进行多个操作 (3) 请求方式会用到GET/POST/PUT/DELETE 非REST API: restless (1) 请求方式不决定请求的CRUD 操作 (2) 一个请求路径只对应一个操作 (3) 一般只有GET/POST 1.2 使用json-server 搭建RES
玖柒的小窝
2021/10/05
2.9K0
【axios】使用json-server 搭建REST API
axios知识盲点整理
JsonServer主要的作用就是搭建本地的数据接口,创建json文件,便于调试调用,模拟和后端服务器进行数据的交互
大忽悠爱学习
2021/11/15
4.1K0
一个很大的变化|将Kubernetes支持窗口增加到一年
从Kubernetes 1.19开始,Kubernetes版本的支持窗口将从9个月增加到1年。较长的支持窗口旨在允许组织在一年中的最佳时间执行主要升级。
CNCF
2020/09/04
4840
一个很大的变化|将Kubernetes支持窗口增加到一年
前端基础-重构TodoList案例
修改:<button @click.stop="removeTodo(key,val.id)" class="destroy"></button>
cwl_java
2020/03/26
4660
上手玩一下json-server(二)操作数据篇——POST/PATCH/DELETE
在上一篇中,我们有db.json文件,里面放置了一些水果信息。 现在新建一个demo文件夹,引入jq库文件(常见的是jquery-2.0.3.min.js,此处的jq.js是被我重命名了)。 另,新建一个jq-ajax.html文件,我们将在这个html文件里头操作db.json数据。
celineWong7
2020/11/05
1.8K0
从零开始学习React-在react项目里面使用mock(七)
从零开始学习React-开发环境的搭建(一) https://www.jianshu.com/p/97f3a1ba168e 从零开始学习React-目录结构,创建组件页面(二) https://www.jianshu.com/p/5b950b8cb73a 从零开始学习React-属性绑定(三) https://www.jianshu.com/p/2c251795d1b3 从零开始学习React-路由react-router配置(四) https://www.jianshu.com/p/2b86d5f4d9d7 从零开始学习React-axios获取服务器API接口(五) https://www.jianshu.com/p/81ca5cc94923 从零开始学习React-解析json、渲染数据(六) https://www.jianshu.com/p/1a998147b09b 从零开始学习React-在react项目里面使用mock(七) https://www.jianshu.com/p/2a5f296a865c
王小婷
2019/11/21
1.8K0
axios笔记(一) 简单入门
打开 http://localhost:3000/,可以在 Resources 中看到所有的接口
赤蓝紫
2023/01/05
1.6K0
axios笔记(一)    简单入门
Ajax笔记(2) -Axios
xhr.onreadystatechange = function() { 当事件发生时执行的代码 }
y191024
2022/09/20
1.4K0
Ajax笔记(2) -Axios
前端必备技能:json-server全攻略
由于json-server需要通过Node对其进行启动,所以首先要安装Node。Node可自行安装,在此不再进行演示。
用户1272076
2020/08/28
1.7K0
vue 构建 todo 项目系列 2
vue 构建 todo 项目系列 1 只是用模拟的数据,页面一刷新就打回原型,本文将用 json-server 构建一个简易的 api,模拟真实的数据服务器
章鱼喵
2019/10/16
6620
json-server
在前端与后端开发的时候,偶尔会有在后端接口没有开发完毕时进行一些接口的mock,这里有一款开源框架做了类似的事情,让你可以“不到30秒得到一个零编码的假REST API”
阿超
2023/06/23
1770
json-server
将oracle驱动包加到maven中
2、确认maven环境变量已整确(cmd 中执行 mvn -v 显示maven的版本信息);
qubianzhong
2018/08/10
5060
Vue里面怎么模拟假数据
在 Vue 组件的 data 选项中定义一个对象,作为假数据的容器。在该对象中设置各种属性和初始值来模拟假数据。
王小婷
2023/09/26
3970
一行命令, 静态json变身api
作为一个前端开发者, 你可以会遇到没有测试数据的尴尬, 而这次我们用json-server, 优雅的解决这个问题 效果 关于 json-server js
zhaoolee
2018/06/14
9500
将Sublime添加到鼠标右键
2、找到 HKEY_CLASSES_ROOT/*/shell 目录,在此目录下操作。
新码农
2020/03/05
3K0
Vue+SessionStorage实现简单的登录
我是基于vue脚手架cli做的,没用过cli的可以看下我之前写的cli脚手架搭建
RtyXmd
2018/08/30
11.7K1
Vue+SessionStorage实现简单的登录
React使用axios请求并渲染数据
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
Leophen
2019/08/23
3.9K0
React-Router-URL参数
React Router 是 React 应用中常用的路由管理库,而 URL 参数则是它的一个关键概念。URL 参数允许您在路由之间传递数据,从而使您的应用程序更灵活和交互性更强。
杨不易呀
2023/10/01
2810
点击加载更多

相似问题

向VBA/VB6集合添加项时出错

41

编译基板添加托盘失败

17

用托盘添加apt回购

16

在基板上添加托盘

111

为自定义托盘基板添加自定义RPC时出错

215
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文