第137期: 如何学习flutter的组件

封面图

现在回过头来看《七龙珠》，它不仅仅是一部动画片，也是一部科幻片。

龙珠雷达，各种飞行器，便携胶囊，头戴式的能量探测仪...

跨平台技术 和 跨端技术

跨平台技术包括 docker、浏览器、jvm、node、deno、electron、web container 等，他们都是跨平台（操作系统）的方案，跨平台有优点也有缺点，缺点就在于 api 的设计比较难，node、deno、java 等都有自己的一层 api 设计；api 一致性的保障也比较困难；其次就是扩展方式复杂一些（jvm 的 jni、node 的 c++ addon 等）。

跨端方案有react native、weex、flutter、kraken 等，有的是绑定了 react、vue 等前端框架，直接从 virtual dom 渲染，有的是实现了 dom api，可以对接任意前端框架。当然可以单独做渲染或逻辑跨端。渲染跨端或者用安卓、ios 提供的方式，或者自己绘制，逻辑跨端或者用 js 引擎（可以对接前端框架）或者用 dart vm。

flutter 组件

flutter 组件是使用了react的设计理念而设计的开发框架。我们平时说的会flutter开发，其实很大程度上是在说能够使用flutter的框架进行开发，flutter其实是个UI框架，和antd , iview, element-ui , 以及我们公司内部的组件库是一种类似的东西。

不同的地方在于，我们的组件库通常是用html 中dom标签结合js进行开发，而flutter则使用dart将各种组件封装成了一些组件的类，使用的体验像是在对各种组件进行实例化,比如：

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

Center和Text就像在对两个类进行实例化的过程，Center有个实例属性child,Text则有两个属性，一个是要显示的文本，另一个是文本的方向textDirection。

和我们平时开发pc端项目一样，flutter的组件其实跟我们平时进行业务开发过程中用到的组件没太多差别，常用的还是那些组件：按钮，文本，图标，布局，图片，反馈（弹框，对话框，loading）等等，不同的是，当我们需要进行某些特殊布局的时候，在pc端开发中，我们可以使用css样式进行布局，比如定位的层级关系z-index。但是在flutter中，它对这些内容也做了一些封装，使得我们可以用组件的形式去实现这些特殊的布局，比如：stack。

在对事件的处理上，pc端，我们可以显示的给dom绑定click等事件，在flutter中，事件的处理更像是组件实例上的一个属性，比如：

         IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: ()=>{},
          ),

onPressed其实是组件类IconButton上的一个属性。

如何学习flutter的组件

我个人对前端的各种技术非常感兴趣，对于一些新的技术，尽管非常乐于去尝试，但是公司的项目中并不一定有实践的机会，所以我的原则是：新技术我可以不用，但是不能不会。

flutter的组件有很多，每个组件都有很多属性和方法，我们不可能每个都能记得住，我们之所以能够非常熟练的开发Pc端的项目，是因为我们每天都在写相关的代码，熟能生巧这是必然的。

那么另外一种学习的方式就是思考，比如：我们要写一个flex布局的组件，在pc端中，我们首先会想到使用css的flex属性，而在flutter中，我们就会想到可以进行flex布局的组件row和column。

既然是布局，那么我们接下来就会想到容器内block的对齐方式，是主轴对齐？还是交叉轴对齐？然后就会想到这两个单词：mainAxisAlignment,crossAxisAlignment。这两个单词对应的就是组件的两个属性，顺其自然的就可以进行代码的编写。

同理，我们可以把这种思考扩展到其他组件上。如果是我开发的组件，我会给这个组件定义哪些属性？这些属性有什么作用？

有了这么一个思考的过程，反过来再看对应的文档上相关的描述，我们会发现，哦，原来是这么回事。

当我们真正开始做用flutter开发一些应用的时候，我们会发现其实我们只不过是按照文档上的内容搭建了一个项目，然后使用它提供的组件进行搭建，偶尔对它的组件做了一些扩展而已。

最后

看文档是一件比较枯燥的事情，前几天看的时候稍微有点心得，这里简单做个记录～

谢谢～