Flutter第二期 - 第一個flutter三平臺APP
繼續flutter學習之旅。
javascript
1.先按照官方的例子敲一遍這個簡單的點擊事件，刷新數據，路由跳轉的代碼，體會一下，我的感受仍是很不錯的：
java
這是例子的關鍵在於要理解一個概念widget：一種是可變狀態的StatefulWidget，一種是不可變狀態的StatelessWidget。並且啓動app的寫法是不可變的，就是建立的過程是runApp到StatelessWidget的初始化佈局代碼，理解這點，這些代碼你寫一下子就明白了，我的理解就是你的項目經理把計劃定下來了，每一個人任務很明確，可是計劃是不變的，你作成什麼樣是陳妍希，仍是劉亦菲，仍是李若彤，看你，最後出來的小龍女統稱，因此纔會有後面要講到的tree的log，保證你的每一步操做均可尋，出現問題就會索引到，這點要比之前好不少，而是單純的哪行錯了，你要打斷去找，這裏全部的widget的操做會級聯的往下走直到你的操做結束。android
main6.dart：ios
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/ app
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真的美哭了，大家本身看吧，調用的話就三句：less
debugDumpApp();//Widget 層 debugDumpRenderTree();//渲染層 debugDumpLayerTree();//層
5.Flutter異常捕獲：終於讓google幫你們解決了，之後錯了google告訴你錯哪了，方案也彈出來，大部分都不用去百度了，是否是很好。dom
@overridevoid performRebuild() {
...
try {
//執行build方法
built = build();
} catch (e, stack) {
// 有異常時則彈出錯誤提示
built = ErrorWidget.builder(_debugReportException('building $this', e, stack));
}
...}
總結：今天講的很少，慢慢來，反正閒着也是閒着，過了打遊戲的年紀就學點啥不丟人，哈哈~先把建立過程，而後屬性設置，還有傳值刷新，還有跳轉基本操做寫熟練後，你發現開啓了新的世界，而後去google的dart官網去找幾個lib玩玩，你興趣就來了，下期我就準備玩玩，哈哈~不玩後面再這麼多線程，網絡封裝，感受很差玩，有大神封裝好的庫，你就以爲有意思了，哈哈~下期見~
ide
相關文章
- 1. [Flutter] 寫第一個 Flutter app，part1 要點
- 2. Flutter第一期 - 初識Flutter
- 3. 運行第一個Flutter App
- 4. Flutter寫第一個跨平臺薅羊毛APP（八）--GitHub開源
- 5. Flutter第三部分（平臺整合）：Flutter中特定平臺代碼的編寫
- 6. 編寫第一個Flutter App（翻譯）
- 7. Flutter第一次上手作個app
- 8. Mac 配置 flutter開發環境到第一個flutter app
- 9. Flutter-BLoC-第三講
- 10. 12_第一個Flutter程序
- 更多相關文章...
- • 第一個MyBatis程序 - MyBatis教程
- • 第一個Hibernate程序 - Hibernate教程
- • RxJava操作符（二）Transforming Observables
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
