1.Widge组件分类

在flutter中，所有UI元素都是widget组件，除了我们常见的button，Image这些可见元素，布局也是组件，甚至文本格式控制也是组件。这里我们先简单讲解一下我们通常概念的上的UI控件。在flutter中组件有两种：有状态组件和无状态组件。

• 无状态组件（stateless widget），无状态组件不提供可变状态维护，无状态组件仅根据其属性来渲染，
• 有状态组件（stateful Widget）,组件自己维护状态，组件渲染由SetState方法调用，更具state的变化差异来更新渲染。所有的stateful widget都是建立在stateless widget上的。
  这里我们先讲解stateless widget, flutter中的stateless widget主要分为这几类：
• Visual Base Elemet, 可视基础元素比如：Text，Image, Icon
• Layout: 布局元素，flutter比较特别一点，它把布局也作为页面元素，这样做的主要目的是可以简化布局计算。以前UI做Layout通常通过Layout引擎根据预定的约束来进行计算, 计算过程实际上是做多元方程式求解，元素越多求解计算就越慢，参考：从 Auto Layout 的布局算法谈性能
  。而flutter将layout也作为页面元素，使得布局在局部范围就可以求解。Layout元素有：Row，Column，Center，Align，Padding等
• Painting and Effect Widgets& Animation and Motion
  ，绘制和效果组件。绘制和效果组件主要是负责可视元素的装饰效果，比如实现边框（DecoratedBox）,实现半透明（Opacity），位移旋转变换（Transform），Animation and Motion是比较特殊的效果组件，用于实现动画效果
• Container&compound element 大多数我们常用的各种控件都是由基础元素和布局组合而成的，比如button由Text，Image，DecoratedBox等元素组成
• Interaction Model Widgets, 这个是专门处理事件响应的组件，用于响应用户的操作

2.让我们来创建Hello World

首先我们先来写一个最基本的flutter应用吧。

1.在适当的目录执行：

flutter init -o my_hello_world_app

2.替换my_hello_world_app/lib/main.dart文件中的内容：

import 'package:flutter/material.dart';
void main() => runApp(new Center(child: new Text('Hello, world!')));

3.在my_hello_world_app目录下执行：

flutter start

4.你将会在手机上看到：

这里写图片描述

如果你能一切顺利的来到这里，那么恭喜你，你已经成功使用flutter开发了一个android的应用，虽然这个应用看上去比较单一。

main方法是这个应用的入口，要运行一个应用的话需要使用runApp方法，它接收一个Widget控件作为参数，并且把这个控件作为控件树的根节点。在我们这个例子里，控件树里有两个控件，Center控件和它的子节点Text。通常情况下框架会强制将根控件充满整个屏幕，所以相对的Text控件就以屏幕为中心了。

重要概念：
在编写flutter应用的时候，通常情况下需要自定义组件，这些组件继承自StatelessComponent或StatefulComponent,选择要继承哪一个取决于这个组件是否需要管理状态和配置。一个组件的主要工作就是实现build方法，这个方法用来反应该组件在其他组件中的表现形式。最后底层框架会统一从上到下调用build方法直至渲染树的最底层。

基本控件

flutter提供了一套完备的基本控件，最常用的有如下几个：

• Text ：Text提供了一个用来显示文本的一次性控件（即无状态）。
• Row, Column：这两个控件用来显示水平或垂直方向上的多个组件，并且是可伸缩的。
• Stack：可以将多个组件以一定的顺序排列，可以使用Positioned控件来指定组件在Stack中的顺序。
• Container: 是一个可视化的矩形控件，它可以使用BoxDecoration来进行外观装饰，装饰内容可以是背景，边框和阴影等。Container也有外边距，内边距等属性，也可以约束自身的大小，另外值得一提的是Container还可以利用矩阵在三维控件内做转换。

下面结合一些基本的控件来自定义我们的组件并构建应用：
修改main.dart代码如下

import 'package:flutter/material.dart';

class MyToolBar extends StatelessComponent { //（3）
  MyToolBar({ this.title });

  final Widget title; //（6）

  Widget build(BuildContext context) {
    return new Container(
      height: 56.0,
      padding: const EdgeDims.symmetric(horizontal: 8.0),
      decoration: new BoxDecoration(
        backgroundColor: Colors.blue[500]
      ),
      child: new Row([
        new IconButton(icon: 'navigation/menu'),
        new Flexible(child: title),
        new IconButton(icon: 'action/search'),
      ])
    );
  }
}

class MyScaffold extends StatelessComponent { //（4）
  Widget build(BuildContext context) {
    return new Material(
      child: new Column([
        new MyToolBar(
          title: new Text('Example title', style: Typography.white.title)
        ),
        new Flexible(
          child: new Center(
            child: new Text('Hello, world!')
          )
        )
      ])
    );
  }
}

void main() {
  runApp(new MaterialApp( //(1)
    title: 'My app',
    routes: <String, RouteBuilder>{ //（2）
      '/': (RouteArguments args) => new MyScaffold() //（5）
    }
  ));
}

同时确保flutter.yaml文件内容如下：

name: my_app
material-design-icons:
  - name: action/search
  - name: navigation/menu

我们先来运行一下这个应用：

这里写图片描述

恭喜你，顺利存活。
代码解释如下：

• （1）处的MaterialApp是整个应用的主题控件，一般我们自定义的组件要写在它里面才会有Material的主题风格
• （2）处的routes的作用是页面导航作用，/表示应用打开的第一个页面。
• （3）处的MyToolBar是我们自定义的一个无状态组件，通过build方法，我们可以看出其最外层是一个Container控件，控件高为56dp,左右内边距8dp，它由一个BoxDecoration做修饰，修饰内容是将背景颜色改为Colors.blue[500]这种颜色。Container的内部是一个Row，Row的两端分别是一个图标按钮，中间是另一个控件Flexible，它的作用是填充掉Row的剩余部分。在Flexible中传入的是title这个内部字段。
• （4）处的MyScaffold组件将其子节点用垂直的方式组织起来，在Column的第一个位置是我们自定义的MyToolBar，在构造MyToolBar的时候将一个Text控件作为它的命名可选参数title的值传递进去。在Column的第二个位置是一个Flexible用来填充剩余的空间，在Flexible里面放置了一个Center组件，Center组件里则是一个Text用来显示“Hello，World”。
• （5）处表示这个应用的第一个见面就是MyScaffold。

这种flutter这种层层包裹的感觉就是前面提到的组件外构建UI一小部分含义，眼尖的同学可能已经看到（6）处的title使用的是final修饰符，这里要说明一下继承自StatelessComponent的组件，如内部有配置，属性或状态的统一需要使用final修饰符，表示这个组件本身自己是无状态的，需要依赖它外部的其他组件。这也是'组件外构建UI'最重要的含义所在。

Material应用

上面那个应用我们使用自己的组件进行应用开发，发现应用整体美观度不高。是因为flutter中应用界面会撑满整个屏幕，所以有一部分内容可能会被状态栏挡住。其实flutter提供了一系列的控件供开发人员开发Material风格的应用，这之中就有MaterialApp，Scaffold，ToolBar和FloatingActionButton等。下面看一个使用了这些控件的例子：

修改main.dart内容如下：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
      title: 'Flutter Tutorial',
      routes: {'/': (RouteArguments args) => new TutorialHome()}));
}

class TutorialHome extends StatelessComponent {
  Widget build(BuildContext context) {
    return new Scaffold(
        toolBar: new ToolBar(
            left: new IconButton(icon: 'navigation/menu'),
            center: new Text('Example title'),
            right: [new IconButton(icon: 'action/search')]),
        body: new Center(child: new Text('Hello, world!')),
        floatingActionButton:
            new FloatingActionButton(child: new Icon(icon: 'content/add')));
  }
}

修改flutter.yaml文件内容如下：

name: my_app
material-design-icons:
  - name: action/search
  - name: content/add
  - name: navigation/menu

运行结果如下：

这里写图片描述

现在我们的应用看起来是不是更像是一个Material Design的应用了？我们使用的Scaffold和ToolBar让ToolBar自带了阴影并且字体风格有有了调整。另外还加上了FloatingActionButton。

总结

本文主要讲解flutter中的组件分类，对如何创建简单Stateless组件进行了演示