您好,登录后才能下订单哦!
继续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玩玩,你兴趣就来了,下期我就准备玩玩,哈哈~不玩后面再这么多线程,网络封装,感觉不好玩,有大神封装好的库,你就觉得有意思了,哈哈~下期见~
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。