[译]Flutter for Android Developers - Async UI

最新推荐文章于 2024-06-12 12:03:22 发布

2401_83621634

最新推荐文章于 2024-06-12 12:03:22 发布

阅读量576

点赞数 11

分类专栏：程序员学习文章标签： flutter android ui

本文链接：https://blog.csdn.net/2401_83621634/article/details/136861046

版权

程序员学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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 {
List widgets = [];

@override
void initState() {
super.initState();
loadData();
}

showLoadingDialog() {
if (widgets.length == 0) {
return true;
}

return false;
}

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 {
ReceivePort receivePort = new ReceivePort();
await Isolate.spawn(dataLoader, receivePort.sendPort);

// The ‘echo’ isolate sends it’s SendPort as the first message
SendPort sendPort = await receivePort.first;

List msg = await sendReceive(sendPort, “https://jsonplaceholder.typicode.com/posts”);

setState(() {
widgets = msg;
});
}

// the entry point for the isolate
static dataLoader(SendPort sendPort) async {
// Open the ReceivePort for incoming messages.
ReceivePort port = new ReceivePort();

// Notify any other isolates what port this isolate listens to.
sendPort.send(port.sendPort);

await for (var msg in port) {
String data = msg[0];
SendPort replyTo = msg[1];

String dataURL = data;
http.Response response = await http.get(dataURL);
// Lots of JSON to parse
replyTo.send(JSON.decode(response.body));
}
}

Future sendReceive(SendPort port, msg) {
ReceivePort response = new ReceivePort();
port.send([msg, response.sendPort]);
return response.first;
}

}

小结：

在Flutter中一般情况下不需要runOnUiThread，AsyncTask，IntentService等类似的概念，因为Dart是基于单线程模型的。异步方法的执行也是通过协程实现的，其实际也还是运行于main isolate中。
Dart中的代码都是运行在isolate中的，各个isolate之间的内存是没法直接共享的。但是可以通过ReceivePort和SendPort来实现isolate之间的通信。每个isolate都有自己对应的ReceivePort和SendPort，ReceivePort用于接受其他isolate发送过来的消息，SendPort则用于向其他isolate发送消息。关于ReceivePort和SendPort更多详情可以参阅官方文档。

在Flutter中OkHttp等价于什么

in Android
我们有很多类似OkHttp之类的网络库使用。
in Flutter
我们使用http package来简单的完成一个网络请求调用。

虽然http package没有实现OkHttp已经实现的所有功能，但是它实现了很多常用的网络请求功能，帮助我们更简单的完成一个网络请求调用。关于http package的更多信息可以参阅官方文档。在使用http package之前我们需要先在pubspec.yaml文件中配置依赖：

dependencies:
…
http: ‘>=0.11.3+12’

然后就可以简单的发起一个网络请求调用：

import ‘dart:convert’;

import ‘package:flutter/material.dart’;
import ‘package:http/http.dart’ as http;
[…]
loadData() async {
String dataURL = “https://jsonplaceholder.typicode.com/posts”;
http.Response response = await http.get(dataURL);
setState(() {
widgets = JSON.decode(response.body);
});
}
}

代码很简单，其实前面的分析中我们就已经看到了http package的身影。在这里是直接调用http.get(dataURL)方法发起一个get请求，参数是一个url，该方法返回的是一个Future<http.Response>类型，所以最终整个await表达式返回的就是一个http.Response类型。一旦请求完成获取到了数据我们就可以调用setState方法来触发系统更新界面。

小结：

在Flutter中我们使用http package来帮助我们更简单的实现网络请求调用。

在Flutter中怎样在一个任务正在运行时显示一个Loading Dialog

in Android
我们可以在运行一个耗时任务时展示一个Loading Dialog，可以使用Dialog或者其他自定义的View来实现。
in Flutter
我们可以用一个Progress Indicator Widget来实现一个Loading Dialog。

下面我们可以看一个例子：

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(),
);
}
}