Flutter加载状态显示插件load_status_view的使用
Flutter加载状态显示插件load_status_view的使用
特性
LoadStatusView 是一个简单的视图，用于展示不同的状态：加载中、成功、空数据、错误和未授权。
开始使用
在 pubspec.yaml 文件中添加依赖：
dependencies:
...
load_status_view: ^0.0.1
基本用法
以下是一个基本的使用示例：
///
LoadStatus loadStatus = LoadStatus.loading;
///
LoadStatusView(status: loadStatus,
errorCall: _retry,
child: const Center(
child: Text('content'),
),
)
/// 初始化加载数据
_loadData() {
_setStatus(LoadStatus.loading);
Future.delayed(Duration(seconds: 2), () {
_setStatus(LoadStatus.success);
});
}
///
_retry() {
_loadData();
}
///
_setStatus(LoadStatus status) {
setState(() {
loadStatus = status;
});
}
更多功能
更详细的使用示例可以在 main.dart 中查看。以下是完整的示例代码：
import 'package:example/unify_load_status_view.dart';
import 'package:flutter/material.dart';
import 'package:load_status_view/load_status_view.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'LoadStatusView Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
LoadStatus loadStatus = LoadStatus.loading;
String errorTip = '';
String emptyTip = '';
[@override](/user/override)
void initState() {
super.initState();
_loadData();
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SafeArea(
child: Stack(
children: [
Column(
children: [
/// 默认配置
Expanded(
child: LoadStatusView(
status: loadStatus,
iconColor: Colors.blueGrey,
emptyTip: emptyTip,
errorCall: _retry,
child: const Center(
child: Text('normal data'),
),
unauthorizedCall: _login,
)),
Divider(),
/// 自定义属性
Expanded(
child: LoadStatusView(
status: loadStatus,
loadingTip: 'loading loading',
iconColor: Colors.green,
emptyIcon: Icon(
Icons.no_cell_outlined,
size: 44,
color: Colors.green,
),
emptyButton: ElevatedButton(
onPressed: _loadData,
child: Text("request again"),
),
showEmptyButton: true,
errorIcon: const Icon(
Icons.error_outline_outlined,
size: 44,
color: Colors.green,
),
emptyTip: emptyTip,
emptyButtonText: "look others",
errorTip: errorTip,
errorCall: _retry,
unauthorizedTip: 'Unauthorized',
showUnauthorizedButton: true,
unauthorizedCall: _login,
child: Center(
child: FlutterLogo(
size: 44,
),
),
)),
Divider(),
/// 统一整个项目的配置
Expanded(
child: UnifyLoadStatusView(
status: loadStatus,
child: Center(
child: FlutterLogo(
size: 88, style: FlutterLogoStyle.horizontal),
),
emptyCall: _loadData,
errorTip: 'unify $errorTip',
errorCall: _retry,
unauthorizedCall: _login,
))
],
),
Row(
children: [
ElevatedButton(
child: Text("loading"),
onPressed: () {
_loadData();
},
),
Spacer(),
ElevatedButton(
child: Text("success"),
onPressed: () {
_setStatus(LoadStatus.success);
},
),
Spacer(),
ElevatedButton(
child: Text("empty"),
onPressed: () {
_setStatus(LoadStatus.empty);
},
),
Spacer(),
ElevatedButton(
child: Text("error"),
onPressed: () {
_setStatus(LoadStatus.error);
},
),
Spacer(),
ElevatedButton(
child: Text("unauth"),
onPressed: () {
_setStatus(LoadStatus.unauthorized);
},
),
],
)
],
),
),
);
}
_loadData() {
_setStatus(LoadStatus.loading);
Future.delayed(Duration(seconds: 2), () {
_setStatus(LoadStatus.success);
});
}
_retry() {
_loadData();
}
_login() {
// 执行登录操作
_loadData();
}
_setStatus(LoadStatus status) {
setState(() {
loadStatus = status;
if (status == LoadStatus.error) {
errorTip = "something is wrong.";
} else if (status == LoadStatus.empty) {
emptyTip = "nothing now.";
}
});
}
}
更多关于Flutter加载状态显示插件load_status_view的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter加载状态显示插件load_status_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
load_status_view 是一个 Flutter 插件，用于简化加载状态的管理和显示。它通常用于在异步操作（如网络请求）中显示加载、成功、失败等状态。以下是使用 load_status_view 插件的基本步骤：
1. 添加依赖
首先，在 pubspec.yaml 文件中添加 load_status_view 插件的依赖：
dependencies:
flutter:
sdk: flutter
load_status_view: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来安装依赖。
2. 导入插件
在你的 Dart 文件中导入 load_status_view：
import 'package:load_status_view/load_status_view.dart';
3. 使用 LoadStatusView
LoadStatusView 是一个小部件，它可以根据不同的状态显示不同的内容。常见的状态包括 Loading、Success、Failure 等。
以下是一个简单的示例，展示了如何使用 LoadStatusView 来管理加载状态：
class MyWidget extends StatefulWidget {
[@override](/user/override)
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
LoadStatus _status = LoadStatus.loading;
Future<void> _fetchData() async {
setState(() {
_status = LoadStatus.loading;
});
// 模拟网络请求
await Future.delayed(Duration(seconds: 2));
// 假设请求成功
setState(() {
_status = LoadStatus.success;
});
// 如果需要处理失败状态
// setState(() {
// _status = LoadStatus.failure;
// });
}
[@override](/user/override)
void initState() {
super.initState();
_fetchData();
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('LoadStatusView Example'),
),
body: LoadStatusView(
status: _status,
loadingWidget: Center(child: CircularProgressIndicator()),
successWidget: Center(child: Text('Data loaded successfully!')),
failureWidget: Center(child: Text('Failed to load data.')),
),
);
}
}