在Flutter中,通过显示一个加载指示器(loading indicator)来阻止用户在某个操作执行期间操作页面。以下是一个简单的示例代码,演示了按钮被点击后执行某操作,在操作完成前显示加载指示器,阻止用户操作页面:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _loading = false;
void _performOperation() {
setState(() {
_loading = true;
});
// 模拟某个操作,比如网络请求或其他耗时操作
Future.delayed(Duration(seconds: 2), () {
setState(() {
_loading = false;
// 在这里添加操作完成后的逻辑
});
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Loading Indicator Example'),
),
body: Center(
child: _loading
? CircularProgressIndicator() // 显示加载指示器
: ElevatedButton(
onPressed: _performOperation,
child: Text('Perform Operation'),
),
),
);
}
}
在这个示例中,当用户点击按钮时,会触发_performOperation
方法,在这个方法中设置_loading
为true
,显示加载指示器。在模拟的操作完成后(这里用Future.delayed
模拟),将_loading
设置为false
,加载指示器消失,用户可以继续操作页面。