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变量的值。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/234750.html
微信扫一扫 