认识 Flutter

Flutter 是谷歌的移动 UI 框架，可以快速在 IOS 和 Android 上构建高质量的原生用户界面。

Flutter 可以与现有的代码一起工作。在全世界，Flutter 正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的

终端命令

flutter run

运行，并且显示虚拟机

r

热更新

p

第一次按下，显示标尺（表格）
再次按下，标尺消失

o

如果在 Android 模式下，就会查看 iOS 模式下样式
如果在 iOS 模式下，就会查看 Android 模式下样式

q

退出，虚拟机关闭

R

热重启

热更新的另一种方法

启动 VSCode 的 Debug，等待启动后，每次想要调试的时候 ctrl+s

初始 Flutter 语法

案例

    import 'package:flutter/material.dart';

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

    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
        title: 'Flutter Demo',
        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
    _MyHomePageState createState() => new _MyHomePageState();
    }

    class _MyHomePageState extends State {
    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: [
                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.
        );
    }
    }

导入包

import 'package:flutter/material.dart';

此行代码作用是导入了 Material UI 组件库。Material 是一种标准的移动端和 web 端的视觉设计语言，Flutter 默认提供了一套丰富的 Material 风格的 UI 组件

应用入口

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

与 C/C++、java 类似，Flutter 应用中 main 函数为应用程序的入口。main 函数中调用了 runApp 方法，它的功能是启动 Flutter 应用。runApp 它接受一个 Widget 参数，在本示例中它是一个 MyApp 对象，MyApp() 是 Flutter 应用的根组件

应用结构

    class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            return new MaterialApp(
                //应用名称  
                title: 'Flutter Demo', 
                theme: new ThemeData(
                    //蓝色主题  
                    primarySwatch: Colors.blue,
                ),
                //应用首页路由  
                home: new MyHomePage(title: 'Flutter Demo Home Page'),
            );
        }
    }

MyApp 类代表 Flutter 应用，它继承了 StatelessWidget 类，这也就意味着应用本身也是一个 widget
Flutter 在构建页面时，会调用组件的 build 方法，widget 的主要工作是提供一个 build() 方法来描述如何构建 UI 界面（通常是通过组合、拼装其它基础 widget）
MaterialApp 是 Material 库中提供的 Flutter APP 框架，通过它可以设置应用的名称、主题、语言、首页及路由列表。MaterialApp 也是一个 widget
Scaffold 是 Material 库中提供的页面脚手架，它包含导航栏和 Body 以及 FloatingActionButton

StatefulWidget

    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 是 Flutter 应用的首页，它继承自 StatefulWidget 类，表示它是一个有状态的组件（Stateful widget）。

有状态组件(Stateful widget)和无状态组件(Stateless widget)的不同

Stateful widget 可以拥有状态，这些状态在 widget 生命周期中是可以变的，而 Stateless widget 是不可变的
Stateful widget 至少由两个类组成
- 一个 StatefulWidget 类
- 一个 State 类；StatefulWidget 类本身是不变的，但是 State 类中持有的状态在 widget 生命周期中可能会发生变化

_MyHomePageState 类是 MyHomePage 类对应的状态类

其他

     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: [
                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),
        ),
        );
    }

Scaffold 是 Material 组件库中提供的一个组件，它提供了默认的导航栏、标题和包含主屏幕 widget 树（后同“组件树”或“部件树”）的 body 属性
body 的组件树中包含了一个 Center 组件，Center 可以将其子组件树对齐到屏幕中心。此例中，Center 子组件是一个 Column 组件，Column 的作用是将其所有子组件沿屏幕垂直方向依次排列；此例中 Column 子组件是两个 Text，第一个 Text 显示固定文本，第二个 Text 显示 _counter 状态的数值

Flutter-初识篇