繼續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玩玩,你興趣就來了,下期我就準備玩玩,哈哈~不玩後面再這麼多線程,網絡封裝,感覺不好玩,有大神封裝好的庫,你就覺得有意思了,哈哈~下期見~