Flutter Widget框架

• 现代响应式框架
• 主要用于构建UI
• 根据状态渲染（当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改（译者语：类似于React/Vue中虚拟DOM的diff算法）
• 编写一个MyAppBar

/**
 * 创建一个自定义的AppBar
 */
class MyAppBar extends StatelessWidget {

  /**
   * 构建方法
   */
  MyAppBar({this.title});

  final Widget title; // title属性 一般用final来标记

  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 86.0, // 单位是逻辑上的像素（并非真实的像素，类似于浏览器中的像素）
      padding: const EdgeInsets.fromLTRB(8.0,40.0,8.0,0.0),
      decoration: new BoxDecoration(color: Colors.blue[500]),
      // Row 是水平方向的线性布局（linear layout）
      child: new Row(
        //列表项的类型是 <Widget>
        children: <Widget>[
          new IconButton(
            icon: new Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // null 会禁用 button
          ),
          // Expanded expands its child to fill the available space.
          new Expanded(
            child: title,
          ),
          new IconButton(
            icon: new Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
    );
  }

}

• 编写一个MyScaffold

/**
 * 自定义内容
 */
class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // Material是UI呈现的一张白纸
    return new Material(
      // 垂直布局
      child: new Column(
        children: <Widget>[
          new MyAppBar(
            title: new Text(
              'Example title', style: Theme.of(context).primaryTextTheme.title,
            ),
          ),

          new Expanded(child: new Center(child: new Text('Hello, world!'),))
          
//          new Expanded(
//            child: new Center(
//              child: new Text('Hello, world!'),
//            ),
//          ),

        ],
      ),
    );
  }

}