Question

这可能是一个基本问题，但我没有找到答案。我执行了CircularProgressIndicator（）并在屏幕上显示了圆，但是圆已停止？就我而言，它继续...无止境... 为什么？我需要打个电话才能停止吗？

在示例代码下面：

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:web_scraper/web_scraper.dart';
import 'dart:io';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _count = 0;
  bool ShowCircle = true;


  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
      ),
      body: Center(
      child : Column(
      children: <Widget>[
        //sleep(const Duration(seconds:2)),
        Text("Sample",style:TextStyle(fontSize: 21)),
      ]



      )),
      backgroundColor: Colors.blueGrey.shade200,
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ShowCircle = !ShowCircle;
          if (ShowCircle)
          CircularProgressIndicator(value:0.0);
          else
            CircularProgressIndicator(value:1.0);
        },
        tooltip: 'Increment Counter',
        child: const Icon(Icons.add),
      ),
    );
  }
}

BR 阿西

Answer 1

如官方文档所述，CircularProgressIndicator具有两种行为：

确定。确定的进度指标在每个时间点都有一个特定的值，该值应从0.0单调增加到1.0，此时指标完成。 要创建确定的进度指示器，请使用0.0到1.0之间的非空值。
不确定。不确定的进度指示器在每个时间点上都没有特定的值，而是表示正在取得进度，而没有指出剩余的进度。要创建不确定的进度指示器，请使用空值。

https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool _showCircle = true;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text("Indeterminate", style: TextStyle(fontSize: 21)),
            _showCircle ? CircularProgressIndicator() : CircularProgressIndicator(value: 0.0),
            Text("Determinate", style: TextStyle(fontSize: 21)),
            _showCircle ? CircularProgressIndicator(value: 0.7) : CircularProgressIndicator(value: 0.0),
          ],
        ),
      ),
      backgroundColor: Colors.blueGrey.shade200,
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _showCircle = !_showCircle;
          });
        },
        tooltip: 'Increment Counter',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Answer 2

您可以将圆形进度指示器包装在 Visibility 小部件中：

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool _showCircle = true;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
      ),
      body: Center(
        child: Visibility(
          visible: _showCircle,
          child: CircularProgressIndicator(),
        ),
      ),
      backgroundColor: Colors.blueGrey.shade200,
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _showCircle = !_showCircle;
          });
        },
        tooltip: 'Show/Hide Circular Progress Indicator',
        child: const Icon(Icons.add),
      ),
    );
  }
}

在本例中，按下按钮将打开/关闭圆形进度指示器的可见性。

CircularProgressIndicator不会停止

2 个答案: