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

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

在onTap的{{1}}回调中，调用GestureDetector，并将setState的值更改为shouldShow。在true中，您还应该以3秒的onTap开始一个新的Timer，并有一个回调，该回调再次调用Duration并将setState更改为{{1} }。

shouldShow示例：

false

构建方法摘要：

onTap

Answer 2

这是示例代码

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

如何显示容器3秒钟

3 个答案: