你好，Flutter

2018-03-05 本文已影响15576人雇个城管打天下

什么是Flutter

2018年2月27日，在2018世界移动大会上，Google发布了Flutter的第一个Beta版本。Flutter是Google用以帮助开发者在Ios和Android两个平台开发高质量原生应用的全新移动UI框架，点击查看Flutter介绍视频。

其实我第一次听说Flutter是在收到谷歌开发者公众号的推送里，当时读完了那篇文章觉得Flutter的优点确实比较突出：

热重载（Hot Reload），作为一个菜鸟安卓开发者，能热重载真的太舒服了，利用Android Studio直接一个ctrl+s就可以保存并重载，模拟器立马就可以看见效果，就这一点比原生安卓制作简直不知道高到哪里去了。
一切皆为Widget的理念，对于Flutter来说，手机应用里的所有东西都是Widget，通过可组合的空间集合、丰富的动画库以及分层课扩展的架构实现了富有感染力的灵活界面设计。
借助可移植的GPU加速的渲染引擎以及高性能本地代码运行时以达到跨平台设备的高质量用户体验。这段介绍是直接抄下来的，虽然我并不知道什么叫可移植的GPU加速的渲染引擎，但是最终结果就是利用Flutter构建的应用在运行效率上会和原生应用差不多。
酷安上有一个Flutter的演示Demo，Flutter Gallery。
如果经常逛酷安的一定会发现这个画廊的演示Demo的图标和另一个演示Demo的图标是一样的，Google Fuchsia OS Preview,这个应用的是传闻的Google正在研发的新一代操作系统，所以个人认为，Flutter的存在可能不仅仅是实现在安卓和IOS上的运行，更是为了日后丰富Fuchsia这个新系统的软件生态而存在的。

Flutter的核心内容

接下来我想写一下我自己通过这两天的接触对于Flutter的核心内容也就是上面好处的第二点的理解。

一切都是控件（Widget）

在Flutter中，每个应用程序都是Widget，这点和其他的应用框架不一样，Flutter的对象模型是统一的，也就是控件。
一个控件可以定义：

结构元素（比如按钮或者菜单）
风格元素（比如字体或者颜色方案）
布局
一些业务逻辑
等等。。。。
控件是基于构图形成层次结构，每个控件嵌套在其中，并从其父代继承属性，没有单独的“应用程序”对象，只有根控件。

您可以通过告知框架用另一个控件替换层次结构中的控件来响应事件，比如用户交互，然后框架会对比新的控件和旧的控件，并有效的更新用户界面，即更新有变化的控件。

也就是说，在Flutter中，一个应用就是有许许多多的Widget组合而成的。

构建第一个Flutter实例

先来介绍一下Flutter里面的基本空间：

Text：文本控件，在应用中创建各种样式的文本。
Row,Column：Flex控件，可以创建水平(Row)或垂直(Column)方向的布局，是基于Web的flexbox的布局模式设计的。
Stack：非线性布局（水平或垂直），控件可以堆叠在其他控件上，可以使用Positioned控件控制Stack相对顶部、右部、底部和左部的位置，是基于Web的absolute定位的布局模式。
Container：创建矩形的可视元素，可以用BoxDecoration来设计样式，比如背景、边框和阴影，Container也有边距、填充和大小限制，另外，还可以在三维空间利用矩阵进行变换。

结合实例分析：

import 'package:flutter/material.dart';

class MyAppBar extends StatelessWidget {
  MyAppBar({this.title});

  final Widget title;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
      height: 56.0,
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: new BoxDecoration(color: Colors.blue[500]),
      //new Row意味着该子布局为水平布局
      child: new Row(
        children: <Widget>[
          //布局依次为图标按钮，剩余容器和图标按钮，如果把第二个IconButton移动到Expanded前则内容会发生改变
          new IconButton(
              icon: new Icon(Icons.menu),
              tooltip: '导航菜单',
              onPressed: null
          ),
          //Expanded的作用可以使用剩余的所有空间。
          new Expanded(
              child: title
          ),
          new IconButton(
              icon: new Icon(Icons.search),
              tooltip: '搜索',
              onPressed: null
          )
        ],
      ),
    );
  }
}

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Material(
      child: new Column(
        children: <Widget>[
          new MyAppBar(
            title: new Text(
              '示例标题',
              style: Theme
                  .of(context)
                  .primaryTextTheme
                  .title,
            ),
          ),
          new Expanded(
            child: new Center(
              child: new Text('你好世界！'),
            ),
          )
        ],
      ),
    );
  }
}

void main() {
  runApp(new MaterialApp(
    title: '我的应用',
    home: new MyScaffold(),
  ));
}

其实说真的我第一眼看到这段代码的时候，第一想法就是，为什么会有这么多括号？但是这不是重点，有点编程经验的都知道要先从main函数看起，这里的main函数里面套了一个runApp函数，

runApp函数接受指定的控件(Widget)，并使其作为控件树(widget tree)的根控件。

runApp里面new了一个MaterialApp对象，然后这个对象有两个参数，第一个是titile，指明了这个控件的标题是啥，第二个参数是home，指明了这个控件的主体是啥。
再深入的看就会发现，home的值是一个new出来的MyScaffold对象，这时我们就可以去查看MyScaffold这个类的声明代码。

MyScaffold控件为子控件设置垂直布局，在垂直顶部放置一个MyAppBar的实例（这个控件也是自己创建的），将MyAppBar的Text控件作为标题使用，将控件作为参数传递给其他控件非常方便实用的，你可以创建通用的控件，以各种方式重复的使用。最后，MyScaffold使用Expanded，用一个中心文本来填充剩余的空间。

MyAppBar控件创建了一个Container(容器)，高度为56设备无关像素(device-independent pixels)，内部左右填充8像素(pixels)。在容器内部，MyAppBar为子控件设置Row(水平)布局，中间的title控件被设置成Expanded，Expanded的作用是展开Row、Column和Flex的子控件，意味它可以使用剩余的所有空间。

其实上述的分析过程就是一个对控件数的一个遍历，从根控件到里面的子控件，Flutter的设计理念就是一切皆为控件，组件套组建。虽然上述代码不是java，c等主流代码，但是理解起来却并不是非常难懂，上手难度确实不大，值得体验。

最后，推荐一些链接：
Flutter官网
 Flutter教程
 Flutter中文开发者论坛

你好，Flutter

什么是Flutter

Flutter的核心内容

一切都是控件（Widget）

构建第一个Flutter实例

猜你喜欢

热点阅读