在Flutter中一段时间​​后隐藏小部件的简单方法 [英] Easy way to hide a widget after some duration in Flutter

问题描述

我已使用 flutter_offline 库显示脱机和联机消息.问题是我想在一段时间后隐藏在线消息.在状态连接后但经过一段时间后，我无法找到一种删除容器的方法.

I have used flutter_offline library to display the offline and online message. The problem is that I want to hide the online message after some time. I can't figure out a way to remove a container when the status is connected but after some duration.

下面是我的代码:

body: OfflineBuilder(
        connectivityBuilder: (
          BuildContext context,
          ConnectivityResult connectivity,
          Widget child,
        ) {
          final bool connected = connectivity != ConnectivityResult.none;
          return SingleChildScrollView(
            scrollDirection: Axis.vertical,
            padding: const EdgeInsets.all(0.0),
            child: Column(
              children: [
                AnimatedSwitcher(
                    duration: const Duration(milliseconds: 350),
                    child: connected
                        ? Container(
                            color: Colors.lightGreenAccent[400],
                            height: 25,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text(
                                  'ONLINE',
                                  style: TextStyle(color: Colors.black),
                                ),
                              ],
                            ))
                        : Container(
                            color: Colors.red,
                            height: 25,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text(
                                  'OFFLINE',
                                  style: TextStyle(color: Colors.white),
                                ),
                                SizedBox(width: 8.0),
                                SizedBox(
                                  width: 12.0,
                                  height: 12.0,
                                  child: CircularProgressIndicator(
                                    strokeWidth: 2.0,
                                    valueColor: AlwaysStoppedAnimation<Color>(
                                        Colors.white),
                                  ),
                                ),
                              ],
                            ),
                          )),
                child,
              ],
            ),
          );
        },

推荐答案

在类顶部添加一个bool变量.当连接状态更改时，请启动延迟计时器，并使用空容器使其在一段时间后不可见.

Make a bool variable on top of your class. when the connection status change, start a delayed timer and use the empty container to make it invisible after some time.

bool _isContainerVisible = true; // in top of your class

body: OfflineBuilder(
    connectivityBuilder: (
      BuildContext context,
      ConnectivityResult connectivity,
      Widget child,
    ) {
      final bool connected = connectivity != ConnectivityResult.none;
      if(connnected){
        Future.delayed(Duration(seconds: 3).then((v){
         if(this.mounted)
          setState((){
          _isContainerVisible = false;
         });
        });

      }
      return SingleChildScrollView(
        scrollDirection: Axis.vertical,
        padding: const EdgeInsets.all(0.0),
        child: Column(
          children: [
            AnimatedSwitcher(
                duration: const Duration(milliseconds: 350),
                child: connected
                    ? _isContainerVisible ?Container(
                        color: Colors.lightGreenAccent[400],
                        height: 25,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              'ONLINE',
                              style: TextStyle(color: Colors.black),
                            ),
                          ],
                        )):Container()
                    : Container(
                        color: Colors.red,
                        height: 25,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              'OFFLINE',
                              style: TextStyle(color: Colors.white),
                            ),
                            SizedBox(width: 8.0),
                            SizedBox(
                              width: 12.0,
                              height: 12.0,
                              child: CircularProgressIndicator(
                                strokeWidth: 2.0,
                                valueColor: AlwaysStoppedAnimation<Color>(
                                    Colors.white),
                              ),
                            ),
                          ],
                        ),
                      )),
            child,
          ],
        ),
      );
    },

这篇关于在Flutter中一段时间​​后隐藏小部件的简单方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！