Flutter(二) 从HelloWord到复盘初始代码

上一篇：《Flutter(一) 环境搭建windows篇》
    Flutter的环境搭建好以后，我们先来一道题。

    注意，这是一道送分题，近几年高考都没有考，今年 一定考。。。。。

    新建一个Flutter项目。

    File==>New==>New Flutter Project，然后填几个项目名之类的东西。
    比新建原生Android应用简单省事多了，是送分题吧！
大概长这样：

    红框标记的文件，是现阶段最重要的文件。

    接下来该运行看看了，可以选择连手机调试，也可以用模拟器。
    个人不建议使用AS自带的那一套模拟器，太占内存了。百度安卓模拟器，选择比较有眼缘的安装上一个。

    然后在device的地方就出现了设备名称，可以点击运行了。
    可以先运行试试效果嘛，是一个点击按钮实现累加的小玩意。

    到这里已经看到最近努力的成果了，但是看到效果不是本篇的重点。

    好了，开始正经的HelloWorld。
    1、在桌面新建一个文本文档，命名阿斯顿飞过.txt，将main.dart的内容全选，复制，粘贴到阿斯顿飞过.txt保存。
    2、然后复制下面代码到main.dart中。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(//

title: 'Flutter Demo', //目前没有发现实际显示的地方
home: new Scaffold( // 估计是framLayout之类的东西，
appBar: new AppBar( //标题栏，Action Bar?
title: new Text("Hello world"),//标题栏的文本
),
body: new Center(//一个实现居中的东西
child: new Text('Hello World！'),//正文中的一个TextView控件。
)
)
);
}
}

粘贴完之后，可以选择鼠标右键，点击Reformat Code with dartfmt,格式化一下。
这时候能发现一个比较好的点：每个括号和谁是对应的，有个编译器级别提供的注释。

    最最基础的hello world出现了。

    对于新语言，我们要抱着真特么坑爹见怪不怪的态度来学习。

    接下来，我们根据界面和代码，可以分析出来一点东西（目前的认识）：

    显示结构最外层是title和home，title是什么鬼看不出来，home是正经显示的地方。home又分成appBar标题栏和body内容区。而且看样子，似乎每一级别都可以往进塞更多东西。
app-|
    |-title
    |-home|-appBar|-text
    |      |       |-more
    |      |       
    |      |-body|-child
    |      |     |-more
    |      |
    |      |-more
    |
    |-more
其他的推测，都已经写在代码的注解了。

    HelloWorld搞定了，开始下一部分，复盘初始代码。
    将 阿斯顿飞过.txt中的代码复制过来，覆盖掉刚刚的内容：

    先把详细的内容，删除掉，留下主题的框架，先观察；

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());//main方法，应该还是有java影子的。

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            title: 'Flutter Demo',//依旧不知道什么鬼的标题
            theme: ,//主题
            home: ,//显示内容的主体
        );
    }
}

    比上面的多了个theme主题的东西。

    大的套路没变，把刚刚删除的代码撤销回去。
    运行一下。
    然后把主题里面的Colors.blue改成Colors.red,热更新，主题确实变成了红色。

    光标移动到new Theme()的圆括号里面，快捷键ctrl+p,我们可以看到一堆构造参数（也许是这么叫吧），这TM也太多了吧！
    找个也许我们能用到的东西新增一个试试效果，脸熟的有个textTheme,新增后theme部分如下：

theme: new ThemeData(
    primarySwatch: Colors.blue,
    textTheme: new TextTheme(display1: Theme.of(context).textTheme.display4),//这个display4是从下面代码中复制过来修改的
),

    Ctrl+S保存，自动触发热更新，哇咔咔，那个计数的0变得贼大，有效果！（不会整动态图，省略）。

    试着再添加点东西，尝试给Scaffold添加一个新的控件，允许的控件在Scaffold的构造方法用ctrl+p快捷键查看，我选了persistentFooterButtons底部栏，你们可以选别的尝试。代码如下：

persistentFooterButtons: <Widget>[new BackButton(color: Colors.black,),
    new BackButton(color: Colors.black,),//我也想用别的，但是没找到
    new BackButton(color: Colors.black,),//毕竟我也是菜鸡起步
    new BackButton(color: Colors.black,),],

保存热更新可以看到如下图：

剩下还可以改点啥，就自己去尝试吧。

    总结几个前面没有的东西吧
    Widget：控件类，据说所有的flutter都是这个的子类，有点像原生安卓的View；
    StatelessWidget：无状态控件，这里的状态到底是个什么东西，还需要慢慢了解；据说是写好后属性不可变。
    StatefulWidget：有状态的控件，控件的状态、文字等属性存在变化的可能。
    State:StatefulWidget只有在配合State类的情况下，才能真正实现状态可变。

附上我的所有代码：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            title: 'Flutter Demo',
            theme: new ThemeData(
                primarySwatch: Colors.blue,
                textTheme: new TextTheme(display1: Theme.of(context).textTheme.display4),
            ),
            home: new MyHomePage(title: 'Flutter Demo Home Page'),
        );
    }
}

class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
    final String title;

    @override
    _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    int _counter = 0;

    void _incrementCounter() {
        setState(() {
        _counter++;
        });
    }

    @override
    Widget build(BuildContext context) {

        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: _incrementCounter,
                tooltip: 'Increment',
                child: new Icon(Icons.add),
            ), // This trailing comma makes auto-formatting nicer for build methods.
            persistentFooterButtons: <Widget>[new BackButton(color: Colors.black,),
                new BackButton(color: Colors.black,),
                new BackButton(color: Colors.black,),
                new BackButton(color: Colors.black,),],
        );
    }
}

我决定下一篇不学flutter了，写点Dart的语法相关吧，先了解了解这个语言的套路和特性，然后再进行，不然这狗X语言也太饶头了。