Flutter:如何使用for循环更改alerbox中的ProgressBar值

时间:2019-08-22 11:14:16

标签: flutter dart

我正在尝试将一组文件上传到服务器,并且我想在每个文件成功上传后显示进度栏的值

我在进度条值上使用了一个双精度变量,并且使用设置状态来更改该值,但是仅在For循环之后显示的值完全结束

SELECT HONORIFIC + ' ' + FIRSTNAME + ' ' + LASTNAME 
. . . 
GROUP BY FIRSTNAME + ' ' + LASTNAME + HONORIFIC

我希望当我们为每个for循环设置状态时,进度条的值都会更新 但是for循环后查看的进度条完全结束

2 个答案:

答案 0 :(得分:0)

您需要为对话框创建一个自定义类。像这样

class MyDialog extends StatefulWidget {
  @override
  _MyDialogState createState() => _MyDialogState();
}

class _MyDialogState extends State<MyDialog> {
  double _progress = 0;

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: Text("Progress = ${_progress}"),
      actions: <Widget>[
        FlatButton(
          child: Text("Start"),
          onPressed: () {
            Timer.periodic(Duration(milliseconds: 10), (timer) {
              if (_progress > 100) timer.cancel();

              setState(() {
                if (_progress < 100) _progress += 1;
              });
            });
          },
        )
      ],
    );
  }
}

并将其用作

showDialog(context: context, builder: (_) => MyDialog());

输出:

enter image description here

答案 1 :(得分:0)

您可以创建自定义对话框,在 Stream 的帮助下,您可以从对话框类外部传递当前进度。请在下面找到示例。

class MyPercentageProgress extends StatefulWidget {
  final Stream<double> stream;
  MyPercentageProgress(this.stream);
  @override
  _MyPercentageProgress createState() => _MyPercentageProgress();
}

class _MyPercentageProgress extends State<MyPercentageProgress> {
  double progress = 0.0;

  StreamSubscription<double> subscribe;

  @override
  void initState() {
    super.initState();
    subscribe = widget.stream.listen((compressProgress) {
      setState(() {
        progress = compressProgress;
      });
    });
  }

  @override
  void dispose() {
    subscribe.cancel();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context){
    return CircularPercentIndicator(
          radius: 60.0,
          lineWidth: 5.0,
          percent: progress,
          progressColor: Colors.green,
        );

      };
  }
}

从另一个类中,您可以推送此对话框并向其添加流,如下所示。

 //start dialog
 StreamController<double> streamController = StreamController<double>();
 Navigator.of(context).push(PageRouteBuilder(
        opaque: false,
        pageBuilder: (BuildContext context, _, __) {
          return MyPercentageProgress(streamController.stream);
        }));

 //add stream with percentage done
 streamController.add(progress);

记得用 streamController.close() 关闭你的流控制器并确保下次打开对话框时关闭流控制器以避免“流已经订阅”错误。

如果这有帮助,请告诉我。