flutter怎么用

Flutter中的CircularProgressIndicator

CircularProgressIndicator是Flutter中用于表示加载进度的组件，它是一个圆形的进度条，可以显示任务的完成百分比，当任务尚未完成时，CircularProgressIndicator会显示为半透明状态；当任务完成时，它会变为不透明状态，CircularProgressIndicator可以与其他控件一起使用，以便在用户界面中提供更好的用户体验。

如何在Flutter中使用CircularProgressIndicator

1、导入依赖

在使用CircularProgressIndicator之前，需要先导入相应的依赖包，在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.1

2、创建Provider

为了让CircularProgressIndicator能够访问数据并更新UI,需要使用Provider来管理数据，创建一个继承自ChangeNotifier的类，用于存储进度信息：

import 'package:flutter/foundation.dart';
class ProgressModel with ChangeNotifier {
  double progress = 0;
}

在main.dart文件中初始化Provider:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'progress_model.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('CircularProgressIndicator示例')),
        body: Center(child: CircularProgressIndicator()),
      ),
    );
  }
}

接下来，将Provider包裹在根组件中，并将ProgressModel传递给它：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(create: (context) => ProgressModel(), child: MaterialApp(home: MyHomePage()));
  }
}

3、在页面中使用CircularProgressIndicator

现在可以在页面中使用CircularProgressIndicator了，在StatefulWidget的State类中获取ProgressModel的实例，并将其传递给build方法：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

在_MyHomePageState类中获取ProgressModel的实例，并在需要的时候更新进度信息：

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  final progressModel = Provider.of<ProgressModel>(context); // 获取ProgressModel实例
  double _progress = 0; // 当前进度值(0-100)
  @override
  void initState() {
    super.initState(); // 确保Ticker已注册到Provider中，否则可能会出现错误提示“Method not found”或“Method not found on object of type 'T'”等，如果遇到这种情况，请尝试重启应用或检查代码是否有误。
    _progress = progressModel.progress; // 将当前进度值设置为ProgressModel中的进度值，这将在屏幕上显示为CircularProgressIndicator的进度条，如果需要动态更新进度信息，请调用setState方法，setState(() {}); 或者直接修改_progress变量的值。