Flutter 中的 ProgressIndicator 持续时间答案

【问题标题】：ProgressIndicator duration in FlutterFlutter 中的 ProgressIndicator 持续时间
【发布时间】：2020-08-26 22:55:12
【问题描述】：

如何显示进度指示器，使其应显示约 15 秒。一旦超过 15 秒，中心会出现一个按钮“重试”，并在“无互联网连接”下方显示消息。

【问题讨论】：

标签： flutter dart progress-indicator

【解决方案1】：

您可以使用Future.delayed() 添加延迟，并在运行时更改小部件，我们可以使用setState()。

将它们结合在一起，您可以尝试这样的事情：

Widget _dialogContent; // Declare this outside the method, globally in the class

// In your method:
_dialogContent = CircularProgressIndicator();
showDialog(
        context: context,
        builder: (BuildContext context) => Container(
          child: AlertDialog(
            content: _dialogContent, // The content inside the dialog
          )
        )
    ); // Your Dialog
Future.delayed(Duration(seconds: 15)); // Duration to wait
setState((){
  _dialogContent = Container(...), // Add your Button to try again and message text in this
})

【讨论】：

【解决方案2】：

您可以将 setState 与计时器一起使用，使其自行停止

bool isLoading = false;   //create a variable to define wheather loading or not

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  //creating the timer that stops the loading after 15 secs
  void startTimer() {
    Timer.periodic(const Duration(seconds: 15), (t) {
      setState(() {
        isLoading = false; //set loading to false
      });
      t.cancel(); //stops the timer
    });
  }

  @override
  void initState() { 
    startTimer();  //start the timer on loading 
    super.initState();    
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(        
        title: Text("App Name"),
      ),
      body: Center(
        child: isLoading
            ? Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  CircularProgressIndicator(), //show this if state is loading
                  Text("Loading...."),
                ],
              )
            : Container(
              //your desiggn here
              ),
      ),
    );
  }
}

【讨论】：