【Flutter真香攻略】(三)新建项目并有个大致印象

正如我前文说过,Flutter对于传统前端来说,或多或少会存在一些习惯不适应的情况,但通过IDE、开源社区、使用时间过渡等辅助或调整,往往也便能接受了。

如果前篇开发环境很早前搭建的,在创建项目前,可以先跑一下命令检查下环境,看看有没有新版本更新的,否则跳过这一步:

flutter doctor

创建项目

正式创建项目,执行命令:

flutter create music_story

等待一会,项目就会创建成功,速度还是比较快的。运行命令看下效果:

cd music_story && flutter run

如果提示你信息:No connected devices.,表示你没有连接设备(真机或模拟器),这时可以运行提示的命令:

flutter emulators

会提示如下内容:

image.png

其中注意下方提示:

  • 如果要运行一个模拟器,则执行flutter emulators --launch <emulator id>;
  • 如果要创建一个模拟器,则执行flutter emulators --create [--name xyz].

由于我以前原生Android项目就创建过AVD,所以截图把它们都罗列出来了,平常执行第一条命令即可,对于IOS来说,它有通用的Simulator,它可以指定具体的设备型号,默认是最新型号IPhone XR。

image.png

因为我是Mac,所以习惯使用下面命令即可看到运行界面:

flutter emulators --launch apple_ios_simulator
flutter run

image.png

因为支持热重载的,所以更新代码后按“r”能直接刷新界面。 我们再来看下项目的目录结构:

目录结构

其中android和ios是最终的应用项目,有原生开发经验的可以直接操作它们,而没有原生经验的也不能担心,因为基本就和lib这个目录打交道,需要原生特定功能的,使用第三方插件即可,当前第三方插件数量应付一般需求也够用了。

观察项目

然后我们再来围观一下构建UI方式,打开main.dart

image.png

它不是XML风格的层次标签格式,所以对于前端来说不少人会不习惯,觉得是代码式创建界面,是UI布局的退步,更像是给后端人员使用的,也有人建议Flutter开发团队提供类似JSX风格的构建方式,但是都婉拒了,说这样构建更灵活,想要这功能,留待开源社区支持,有兴趣可以看这两个issues:

https://github.com/flutter/flutter/issues/11609 https://github.com/flutter/flutter/issues/15922

那开源社区有没有呢?我找了一下,还真有一个还可以的: flutter-view,可以使用Pug/HTML和Sass/CSS构建UI布局,Github地址,有兴趣可以了解一下,后续可能专门写一篇关于它的。

当前篇幅有点过长了,暂停并留待下篇继续。

布局组件和普通UI组件同样方式使用,所以建议先熟悉一轮所有布局组件,此外不要做单一太多层级的组件,不然太多“}”看到头晕,应该把大组件拆分成各个小组件,加上IDE的智能提示,可读性就会较为提高,但总感觉可预估性难把握,如本来是个简单组件,加个border和居中就要变成大组件了…

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券