我想在Flutter中调用API的同时展示全屏加载视图。但是当我在Scaffold主体中添加加载小部件时,它会出现在应用栏和底部导航栏之后。
我花费了很多时间来显示全屏加载视图。此外,我还想在API调用期间防止返回操作。
我花费了很多时间来显示全屏加载视图。此外,我还想在API调用期间防止返回操作。
好的,既然你正在使用Scaffold
,那么就可以利用它的showDialog()
方法。
它有一个名为barrierDismissible
的属性,如果将其设置为false,则用户将无法关闭或与其外部屏幕进行交互。
void _openLoadingDialog(BuildContext context) {
showDialog(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return AlertDialog(
content: CircularProgressIndicator(),
);
},
);
}
Navigator.pop(context);
来关闭对话框。Scaffold
包装在一个WillPopScope
小部件中,并实现onWillPop函数。@override
Widget build(BuildContext context) {
return WillPopScope(
child: Scaffold(
body: Container(),
),
onWillPop: _onBackButton
);
}
Future<bool> _onBackButton() {
// Implement your logic
return Future.value(false);
}
isLoading
,使用它来防止返回。例如:// --------------- some_screen.dart ---------------
import 'package:flutter/material.dart';
import 'package:screen_loader/screen_loader.dart';
class SomeScreen extends StatefulWidget {
@override
_SomeScreenState createState() => _SomeScreenState();
}
class _SomeScreenState extends State<SomeScreen> with ScreenLoader<SomeScreen> {
getData() {
this.performFuture(NetworkService.callApi);
}
@override
Widget screen(BuildContext context) {
return WillPopScope(
child: Scaffold(
// your beautiful design..
),
onWillPop: () async {
return !isLoading;
},
);
}
}
// --------------- app_api.dart ---------------
class NetworkService {
static Future callApi() async {
}
}
注意: 您需要查看performFuture
的定义,以了解它在不同场景下的工作方式。
你没有考虑移除加载屏幕的脚手架吗?
showDialog
可能会破坏上下文。请查看 https://pub.dev/packages/screen_loader。 - Arnold Parge