第126期:如何学习flutter组件

2022-12-14 08:26:18 浏览数 (1)

跨平台技术 和 跨端技术

跨平台技术包括 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将各种组件封装成了一些组件的类,使用的体验像是在对各种组件进行实例化,比如:

代码语言:javascript复制
void main() {
  runApp(
    const Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

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

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

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

代码语言:javascript复制
         IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: ()=>{},
          ),

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

如何学习flutter的组件

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

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

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

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

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

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

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

最后

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

谢谢~

0 人点赞