Flutter第二期 - 第一個flutter三平臺APP

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

????