一，概述
上篇讲解了数据库和后端服务的开发（上篇地址：
http://mp.toutiao.com/preview_article/?pgc_id=6732604526680867335）。本篇介绍APP开发，APP开发使用谷歌的开发框架Flutter，Flutter支持跨平台运行，而且具有接近原生APP的性能，前不久阿里闲鱼也开源了一个Flutter的应用框架，总总迹象表明Flutter有可能成为开发APP的热门工具，笔者经过一段时间学习使用后，对Flutter越来越推崇。如需要APP源代码，请评论区回复邮箱地址。
二，APP功能
简单的日志APP:支持添加日志，查询历史日志功能。
三，效果
APP效果
四，步骤
1，创建APP框架
开发使用的ide为VS Code，VS Code环境配置不在这里介绍了，请自行百度。
使用VS Code创建一个空的Flutter应用，添加如下代码：
import ‘package:flutter/material.dart’;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘日志’,
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
以上代码创建了一个基本的APP框架，包括标题，主题，主页等信息。其中MyHomePage是主页的名称。
2，创建主页-显示日志列表
主页主要实现日志列表显示，流程图如下：
（１）MyHomePage页面结构
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title, style: TextStyle(fontSize: 18)),
actions: <Widget>[
GestureDetector(
child: Icon(
Icons.add,
size: 35,
),
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new NewLogPage()),
);
},
),
Container(
width: 20,
)
],
),
body: ListView(
children: GetLogList(),
),
);
（２）连接ＷebSocketServer
WebSocketUtils _webSocketUtils = new WebSocketUtils();
_webSocketUtils.Connect(OnConnected);
（3）连接后请求日志列表
var message = {“Method”: “Log.GetList”};
_webSocketUtils.SendMessage(jsonEncode(message));
（4）解析日志列表信息
void DealMessage(dynamic data) {
print(data.toString());
dynamic message = jsonDecode(data);
String method = message[“Method”];
if (method == “Log.GetList”) {
dynamic result = message[“Result”];
for (int i = 0; i < result.length; i++) {
Log log = new Log();
log.title = result[i][“Title”];
log.content = result[i][“Content”];
log.Date = result[i][“Date”];
_logList.add(log);
}
setState(() {});
}
}
（5）显示日志列表
List<Widget> wList = new List<Widget>();
for (int i = 0; i < _logList.length; i++) {
Card card = Card(
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text(_logList[i].Date, style: TextStyle(fontSize: 12)),
Text(_logList[i].title, style: TextStyle(fontSize: 14))
],
),
Padding(
padding: EdgeInsets.all(10),
child: Text(_logList[i].content,
style: TextStyle(fontSize: 12)))
]));
wList.add(card);
}
3，创建新建日志页
（１）创建日志页面结构
Scaffold(
appBar: AppBar(title: Text(“添加日志”, style: TextStyle(fontSize: 18))),
body: new ListView(children: <Widget>[
(new Padding(
padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
child: new Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(children: [
Text(“标题:”, style: TextStyle(fontSize: 15.0)),
new Expanded(child: TextField(
onChanged: (String data) {
_title = data;
},
)),
]),
Row(children: [
Text(
“内容:”,
style: TextStyle(fontSize: 15.0),
),
new Expanded(
child: TextField(
onChanged: (String data)
{
_content=data;
},
maxLines: 8,
))
]),
Row(children: [
new Expanded(
child: Padding(
padding: EdgeInsets.fromLTRB(80, 20, 80, 0),
child: RaisedButton(
onPressed: () {
CreateNewMeeting();
},
color: Colors.blue,
child: Text(“添加”,style:TextStyle(color:Colors.white)))))
]),
])))
]),
);
（2）发送添加日志请求，并跳回到主页
void CreateNewMeeting()
{
var data = {
“Method”:”Log.Add”,
“Title”:_title,
“Content”:_content
};
_webSocket.SendMessage(jsonEncode(data));
Navigator.of(context).push(new MaterialPageRoute(builder: (_) {
return new MyHomePage();
}));
}
至此APP整体的开发过程就介绍完了，如有更好的建议，请评论区回复，如需要源代码，请评论区回复邮箱地址。
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！