如何显示一个容器 3 秒

Question

我有一个容器，其中有 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 个容器。两者都显示文本。我需要的是当用户单击手势检测器时，第一个容器显示该值，并在 3 秒后隐藏。

Answer 1

这是一个示例代码

class _MyWidgetState extends State<MyWidget> {
  var showPercentage = true;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
            GestureDetector(
              // ==== THIS IF STATEMENT WILL TAKE CARE OF THE REST
              child:if (showPercentage) Text('Percentage widget'),
              onTap: () {
                setState(() {
                  showPercentage = !showPercentage;
                });
                Timer timer = Timer(Duration(seconds: 3), () {
                  setState(() {
                    showPercentage = false;
                  });
                });
              },
            ),
          Text('text widget'),
        ],
      ),
    );
  }
}

Answer 2

您应该首先创建一个类似shouldShow 的条件来确定何时显示容器，然后在列中的容器之前执行类似if(shouldShow) 的操作。

在GestureDetector 的onTap 回调中，调用setState 并将shouldShow 的值更改为true。在 onTap 中，您还应该使用 3 秒的 Duration 开始一个新的 Timer，并通过回调再次调用 setState 并将 shouldShow 更改为 false。

onTap 示例：

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

构建方法sn-p：

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
  ],
),

Answer 3

flutter 文档有一个很好的例子，通过用AnimatedOpacity 小部件包装一个容器，在 500 毫秒后淡出一个小部件。

AnimatedOpacity(
  // If the widget is visible, animate to 0.0 (invisible).
  // If the widget is hidden, animate to 1.0 (fully visible).
  opacity: _visible ? 1.0 : 0.0,
  duration: Duration(milliseconds: 500),
  // The green box must be a child of the AnimatedOpacity widget.
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.green,
  ),
);