【flutter】加载指示器(loading indicator)阻止用户在某个操作执行期间操作页面
在Flutter中,通过显示一个加载指示器(loading indicator)来阻止用户在某个操作执行期间操作页面。以下是一个简单的示例代码,演示了按钮被点击后执行某操作,在操作完成前显示加载指示器,阻止用户操作页面:
(图片来源网络,侵删)
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { bool _loading = false; void _performOperation() { setState(() { _loading = true; }); // 模拟某个操作,比如网络请求或其他耗时操作 Future.delayed(Duration(seconds: 2), () { setState(() { _loading = false; // 在这里添加操作完成后的逻辑 }); }); } @override 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,加载指示器消失,用户可以继续操作页面。
(图片来源网络,侵删)
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...