Flutter第二期 - 第一个flutter三平台APP
2019-04-24 17:54
1036 查看
继续flutter学习之旅。
1.先按照官方的例子敲一遍这个简单的点击事件，刷新数据，路由跳转的代码，体会一下，个人感觉还是很不错的：
这是例子的关键在于要理解一个概念widget：一种是可变状态的StatefulWidget，一种是不可变状态的StatelessWidget。而且启动app的写法是不可变的，就是创建的过程是runApp到StatelessWidget的初始化布局代码，理解这点，这些代码你写一会儿就明白了，个人理解就是你的项目经理把计划定下来了，每个人任务很明确，但是计划是不变的，你做成什么样是陈妍希，还是刘亦菲，还是李若彤，看你，最后出来的小龙女统称，所以才会有后面要讲到的tree的log，保证你的每一步操作都可寻，出现问题就会索引到，这点要比以前好很多，而是单纯的哪行错了，你要打断去找，这里所有的widget的操作会级联的往下走直到你的操作结束。
main6.dart：
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
// 项目经理bufen
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: 'Flutter Demo1',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
// 苦逼的你
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new _MyHomePageState();
}
}
// 苦逼的你要做的活
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _add_counter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _add_counter,
tooltip: '增加',
child: new Icon(Icons.add),
),
);
}
}2.路由管理：这个是我最喜欢的，因为之前google的跳转太多方法了，我要学好多，现在终于变成一种了，很舒服，个人理解是跟javascript很像，就是超链接的方式，唯一要注意的就是如果你显式跳转就要好好看看MaterialPageRoute的方法，android和ios是不一样的，关系到你的页面跳转动画，这里我就不多说了，API会告诉你很细。但是你要是隐式去蹦，那就很爽了，跟之前的Intent一样，自己写名字，要注意的需要注册，而且是不能直接传值的，需要你手动传。
main7.dart:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: 'Flutter Demo1',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
routes: {
"act.yun.page2": (context) => NewRoute(),
},
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _add_counter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
FlatButton(
child: Text("跳转到第二个页面"),
textColor: Colors.lightBlueAccent,
onPressed: () {
Navigator.pushNamed(context, "act.yun.page2");
// Navigator.push(context,
// new MaterialPageRoute(builder: (context) {
// return new NewRoute();
// }));
},
)
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _add_counter,
tooltip: '增加',
child: new Icon(Icons.add),
),
);
}
}
class NewRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: AppBar(
title: new Text("新路由"),
),
body: Center(
child: Text("这是flutter新路由写法"),
),
);
}
}3.包管理：这地方巨坑，个人在用的时候把sdk路径都搞没了，原因是dart不能出现两个同时在用，不然就出问题，你跑不起来，终极解决方案，如果你遇到巨坑：重启ide就可以了，估计是google进程占用的问题，以后应该会解决的。第三方库地址终于可以秒开了：https://pub.dartlang.org/
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
//void main() => runApp(new MyApp());
void main() {
runApp(new MaterialApp(
home: new MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: 'Flutter Demo1',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
routes: {
"act.yun.page2": (context) => EchoRoute("内容固定"),
},
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _add_counter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
FlatButton(
child: Text("跳转到第二个页面"),
textColor: Colors.lightBlueAccent,
onPressed: () {
Navigator.pushNamed(context, "act.yun.page2");
debugDumpApp();//Widget 层
debugDumpRenderTree();//渲染层
debugDumpLayerTree();//层
// Navigator.push(context,
// new MaterialPageRoute(builder: (context) {
// return new NewRoute();
// }));
},
)
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _add_counter,
tooltip: '增加',
child: new Icon(Icons.add),
),
);
}
}
class EchoRoute extends StatelessWidget {
EchoRoute(this.tip);
final String tip;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Echo route"),
),
body: Center(
// child: Text(tip),
child: new RandomWordWidget(),
),
);
}
}
class RandomWordWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
final wordPair = new WordPair.random();
return Padding(
padding: const EdgeInsets.all(8.0),
child: new Text(wordPair.toString()),
);
}
}4.调试Flutter应用：终于到了激动的环节，这个log真的美哭了，你们自己看吧，调用的话就三句：
debugDumpApp();//Widget 层 debugDumpRenderTree();//渲染层 debugDumpLayerTree();//层
5.Flutter异常捕获：终于让google帮大家解决了，以后错了google告诉你错哪了，方案也弹出来，大部分都不用去百度了，是不是很好。
@overridevoid performRebuild() {
...
try {
//执行build方法
built = build();
} catch (e, stack) {
// 有异常时则弹出错误提示
built = ErrorWidget.builder(_debugReportException('building $this', e, stack));
}
...} 总结：今天讲的不多，慢慢来，反正闲着也是闲着，过了打游戏的年纪就学点啥不丢人，哈哈~先把创建过程，然后属性设置，还有传值刷新，还有跳转基本操作写熟练后，你发现开启了新的世界，然后去google的dart官网去找几个lib玩玩，你兴趣就来了，下期我就准备玩玩，哈哈~不玩后面再这么多线程，网络封装，感觉不好玩，有大神封装好的库，你就觉得有意思了，哈哈~下期见~
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Flutter初体验（二）—— 创建第一个Flutter APP
- 开发跨平台app推荐React Native还是flutter？
- Hello Flutter!(编写你的第一个 Flutter App)
- 编写第一个Flutter App（翻译）
- 移动端跨平台开发框架 Cordova 学习笔记(一) 环境搭建及创建第一个 Cordova Android APP
- 在Android中使App快速、简单地支持新浪微博、微信、QQ、facebook等十几个主流社交平台的分享功能
- Google云计算开发平台 google appengine体会谈
- 微信，qq，微博 等app开发，各app sdk，开放平台
- [Andriod官方训练教程]创建你的第一个App之创建一个Android项目
- google appengine for java 第一个例子
- #Win8# 开发你的第一个App《Dota宝典》
- 第一个上线的app终于做出来了，特此发文记录庆祝下。
- 安卓应用App发布至各大平台汇总
- App免费内测托管平台|iOS应用Beta测试分发
- .Net语言 APP开发平台——Smobiler学习日志：如何快速实现类似于微信的悬浮显示二维码效果
- 第一个androidAPP项目总结—ListView的上拉和下拉
- APICloud App定制平台的操作指南
- Django之第一个app<1>
- IOS第一个简单APP
- 【仿微盟源码分享】利用第三方微信营销托管平台快速增加粉丝，形成良好互动，打造精美微信APP