为Flutter应用添加loading效果
在App中，如果一项任务需要长时间等待，我们通常会在页面上显示loading的状态，在Flutter中这可以通过使用 ProgressIndicator 小部件来完成。您可以通过编程方式显示进度 UI，方法是通过布尔型标志在控制呈现到进程 UI，并告诉 Flutter 在长时间运行任务开始之前更新其状态，并在结束之后隐藏它。
下面我们分别用两种方法展示Flutter中的loading效果。
1. 不用第三方的package
在下面的例子中，我们将构造函数分解为三个不同的函数。如果 showLoadingDialog() 是 true（当 widgets.length == 0）然后我们渲染 ProgressIndicator，否则我们在 ListView 中用数据显示。
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
runApp(new SampleApp());
}
class SampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Sample App',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new SampleAppPage(),
);
}
}
class SampleAppPage extends StatefulWidget {
SampleAppPage({Key key}) : super(key: key);
@override
_SampleAppPageState createState() => new _SampleAppPageState();
}
class _SampleAppPageState extends State<SampleAppPage> {
List widgets = [];
@override
void initState() {
super.initState();
loadData();
}
showLoadingDialog() {
return widgets.length == 0;
}
getBody() {
if (showLoadingDialog()) {
return getProgressDialog();
} else {
return getListView();
}
}
getProgressDialog() {
return new Center(child: new CircularProgressIndicator());
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Sample App"),
),
body: getBody());
}
ListView getListView() => new ListView.builder(
itemCount: widgets.length,
itemBuilder: (BuildContext context, int position) {
return getRow(position);
});
Widget getRow(int i) {
return new Padding(padding: new EdgeInsets.all(10.0),
child: new Text("Row ${widgets[i]["title"]}"));
}
loadData() async {
String dataURL = "https://api.iw3c.com/data";
http.Response response = await http.get(dataURL);
setState(() {
widgets = json.decode(response.body);
});
}
}
2. 使用第三方的package
我们需要用到一个第三方的package，名字叫：modal_progress_hud
import 'package:flutter/material.dart';
import 'package:modal_progress_hud/modal_progress_hud.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MyAPP',
theme: new ThemeData(
primarySwatch: Colors.red
),
home: new MyAppHomePage()
);
}
}
class MyAppHomePage extends StatefulWidget{
@override
MyAppHomePageState createState() {
// TODO: implement createState
return new MyAppHomePageState();
}
}
class MyAppHomePageState extends State<MyAppHomePage>{
int _counter = 0;
bool _loading = false;
void _plusOne(){
setState(() {
_counter++;
_loading = !_loading;
});
}
void _stopLoading(){
setState(() {
_loading = false;
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text('测试按钮'),
centerTitle: true,
actions: [
new IconButton(
icon: new Icon(Icons.close),
onPressed: _stopLoading
)
],
),
<span class="highlight-nl">body:</span> <span class="highlight-n">ModalProgressHUD</span><span class="highlight-p">(</span>
<span class="highlight-nl">inAsyncCall:</span> <span class="highlight-n">_loading</span><span class="highlight-p">,</span>
<span class="highlight-nl">opacity:</span> <span class="highlight-m">0.5</span><span class="highlight-p">,</span>
<span class="highlight-nl">progressIndicator:</span> <span class="highlight-n">LinearProgressIndicator</span><span class="highlight-p">(),</span> <span class="highlight-c1">// 三种 CircularProgressIndicator RefreshProgressIndicator LinearProgressIndicator
child: new Row(
children: [
new RaisedButton(
onPressed: null,
child: new Text('Button $_counter'),
),
new FloatingActionButton(
onPressed: _plusOne,
child: new Icon(Icons.plus_one),
)
],
)
),
);
}
}
效果如下：
友情链接