线程和异步的UI
1 异步的使用
Dart 有一个单线程执行模型,支持Isolate(一种在另外一种线程运行dart的方法),一个事件循环和异步编程。
可以使用async / await 来做网络请求不会挂起UI
使用http 导入
import ‘dart:io’;
import ‘dart:convert’;
// 加载数据
dataHandle()async{
String url = "https://www.apiopen.top/journalismApi";
var responseBody;
var http = new HttpClient();
var request = await http.getUrl(Uri.parse(url));
var response = await request.close();
if (response.statusCode == 200){
print("Success");
responseBody = await response.transform(utf8.decoder).join();
print(responseBody);
}else{
print("error happend");
}
}
2 网络请求数据 加载到列表中去
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'dart:convert';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SampleAppPage(),
);
}
}
class SampleAppPage extends StatefulWidget{
SampleAppPage({Key key}) : super(key:key);
@override
_SampleAppPageState createState() => _SampleAppPageState();
}
class _SampleAppPageState extends State<SampleAppPage>
{
List widgets =[];
// 加载数据
dataHandle()async{
String url = "https://www.apiopen.top/journalismApi";
var responseBody;
var http = new HttpClient();
var request = await http.getUrl(Uri.parse(url));
var response = await request.close();
if (response.statusCode == 200){
print("Success");
responseBody = await response.transform(utf8.decoder).join();
responseBody = json.decode(responseBody);
// 通过调用setState 方式来更新UI
setState(() {
widgets = responseBody["data"]["tech"];
print(widgets.length);
});
}else{
print("error happend");
}
}
// 初始化状态的时候加载数据
@override
void initState() {
super.initState();
dataHandle();
}
Widget getRow (int idx){
return Padding(
padding: EdgeInsets.all(10),
child: Text("${widgets[idx]["title"]}",
style: new TextStyle(fontSize: 22,color: Colors.green),),
);
}
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(title: new Text("Hello World")),
body: ListView.builder(
itemCount: widgets.length,
itemBuilder: (BuildContext context,int idx){
return getRow(idx);
},
),
);
}
}