2

我试图在运行异步任务时显示一个循环进度指示器。异步任务由单击按钮触发，并且还将用户引导至新页面。代码如下所示：

child: GestureDetector(
   onTap: () async{

     //some async task that takes a few seconds

     Navigator.push( ...
}

我希望用户在单击按钮时首先看到一个圆形进度指示器，并且当任务完成时，他应该被引导到另一个屏幕。但我不知道如何向他展示这个进度指示器。提前感谢您的回答！

4

2 回答 2

1

你可以使用这个库https://pub.dev/packages/simpleprogressdialog

创建 ProgressDialog 的对象

ProgressDialog progressDialog = ProgressDialog(context: context, barrierDismissible: false);

showMaterial然后在你的异步任务之前调用

progressDialog.showMaterial(layout: MaterialProgressDialogLayout.overlayWithCircularProgressIndicator);

然后在异步任务之后，关闭对话框。

progressDialog.dismiss();
于 2020-05-18T20:10:05.417 回答
1

我对你想要的做了一点模拟：

检查下面的代码：

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // boolean variable to decide when to show progress indicator
  bool showProgress = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: () async {
            // set the progress indicator to true so it will be visible
            setState(() {
              showProgress = true;
            });
            // perform asynchronous task here
            await Future.delayed(Duration(seconds: 4), null);

            setState(() {
              // set the progress indicator to true so it would not be visible
              showProgress = false;
              // navigate to your desired page
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => AnotherScreen()));
            });
          },
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Your widgets can stay here',
                style: TextStyle(fontSize: 20),
              ),
              SizedBox(
                height: 20,
              ),
              Container(
                height: 50,
                width: 50,
                color: Colors.blue,
                child: Center(
                  // use ternary operator to decide when to show progress indicator
                  child: showProgress
                      ? CircularProgressIndicator()
                      : Text('Tap me'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

检查下面的输出：

在这里输出

注意：为简单起见（使用了上面的示例）。避免setState多次调用。您可以使用Bloc或Provider之类的状态管理技术，并且可能决定使用服务定位器进行注入。

于 2020-05-18T21:11:42.180 回答