【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和居中就要变成大组件了…