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());// 项目经理bufenclass 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 createState() {    // TODO: implement createState    return new _MyHomePageState();  }}// 苦逼的你要做的活class _MyHomePageState extends State {  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: [            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 createState() {    // TODO: implement createState    return new _MyHomePageState();  }}class _MyHomePageState extends State {  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: [            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 createState() {    // TODO: implement createState    return new _MyHomePageState();  }}class _MyHomePageState extends State {  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: [            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玩玩，你兴趣就来了，下期我就准备玩玩，哈哈~不玩后面再这么多线程，网络封装，感觉不好玩，有大神封装好的库，你就觉得有意思了，哈哈~下期见~