如何在3秒内显示一个容器

我有一个容器,里面有2个字段。1是一个百分比,另一个是简单的文本。我需要的是,我不想显示百分比的容器,当我点击容器时,它将只显示3秒的百分比,然后消失,有人能告诉我这是怎么做到的吗?

下面是我的代码

int size = _questions.length;

void nextQuestion(){
  if(index < size - 1)
    setState(() {
      index++;
    });
  print(index);
}


double percentage1Calculate(){
  int wouldClick = int.parse(_questions[index]['wouldclick']);
  int ratherClick = int.parse(_questions[index]['ratherclick']);
  double percentage1 = wouldClick / (wouldClick + ratherClick) * 100;
  return percentage1;
}


        GestureDetector(
          child: Container(
            height: stackHeight * 0.5,
            width: stackWidth,
            color: Colors.blue,
            child: Column(
              children: <Widget>[
                Container(
                    padding: const EdgeInsets.only(top: 10, right: 10),
                    height: stackHeight * 0.1,
                    color: Colors.blue,
                    width: double.infinity,
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: <Widget>[
                        Text('${percentage1Calculate().toStringAsFixed(0)}%',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 23,
                            fontFamily: 'NewsCycle',
                          ),
                        ),
                      ],

                    )
                ),
                Container(
                  color: Colors.blue,
                  height: stackHeight * 0.4,
                  width: double.infinity,
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(top: 20),
                        child: Text(
                          _questions[index]['would'],
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 23,
                            fontFamily: 'NewsCycle',
                          ),
                        ),
                      ),
                    ],
                  )
                ),
              ],
            ),
          ),
        ),

在代码中,我在GestureDetector中封装了一个容器。在容器中我有2个容器,都在显示文字。我需要的是当用户点击手势检测器时,第1个容器就会显示数值,3秒后就会隐藏。

解决方案:

你应该先做一个条件,比如 shouldShow 决定何时应该显示容器,然后做一些类似于 if(shouldShow) 在列中的容器前。

onTap 的回调 GestureDetector呼叫 setState 并改变 shouldShowtrue. 在 onTap 你也应该开始一个新的 Timer 附带 Duration 3秒的回调,调用 setState 再改 shouldShowfalse.

onTap 样板。

onTap: () {
  setState(() {
    shouldShow = true;
  });
  Timer timer = Timer(Duration(seconds: 3), () {
    setState(() {
      shouldShow = false;
    });
  });
}

构建方法片段。

child: Column(
  children: <Widget>[
    if(shouldShow)
    Container(
      padding: const EdgeInsets.only(top: 10, right: 10),
      height: stackHeight * 0.1,
      color: Colors.blue,
      width: double.infinity,
      child: Column(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Text('${percentage1Calculate().toStringAsFixed(0)}%',
              style: TextStyle(
              color: Colors.white,
              fontSize: 23,
              fontFamily: 'NewsCycle',
            ),
          ),
        ],
      )
    ),
    //Other container here
  ],
),

给TA打赏
共{{data.count}}人
人已打赏
未分类

在MS应用中心签署一个iOS应用,以便在aws设备农场上工作。

2022-9-8 14:40:44

未分类

如何将脚本部分的数据中的方法名传递给Vue上的@click?

2022-9-8 14:51:28

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索