我的第一个 Flutter 应用之旅

参考官网的的开始使用，配置好开发环境即可进行 Flutter 开发了，当然开发前还是有必要了解一下 Dart 这门语言的，接下来涉及到与其他开发语言不太相同的地方会在文章里提出来。本教程使用的 flutter 版本为稳定版本 2.0 版本。

创建 Flutter 工程

推荐使用命令行的方式新建工程（使用 IDE 创建的过程会比较慢），命令如下：

flutter create hello_world

Flutter 会默认创建一个示例工程，然后使用命令 打开工程（code 命令是 vscode 的一个别名，需要在.zshrc 配置别名：alias code='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code'

code hello_word

项目目录结构如下图所示：

各个目录或文件说明如下：

• android：安卓原生工程配置相关文件，包括应用图标，原生资源，权限配置等。

• ios：iOS 原生工程配置相关文件，熟悉 iOS 开发的会知道具体的用途，其中 最主要的是 Runner 下，设置到原生的配置，如最关键的 InfoPlist 文件，以及权限相关的配置，这些配置建议在 Xcode 中配置会更为直观。

• build：打包输出文件，主要是安卓打包文件，iOS 打包需要通过 Xcode 完成。

• lib：最重要的目录，所有源码都在这个目录，其中 main.dart 是入口文件，而 main 方法是入口方法。

• test：测试相关文件

• web：Flutter 2.0 引入的，支持三端统一的 web 端文件

• pubspec.yaml：这个文件十分重要，所有的第三方依赖，以及文件依赖都通过这个文件管理，类似与苹果的 podfile 和安卓的 gradle 文件。

运行应用

如果要在安卓模拟器运行，则需要安装安卓 Studio，并配置好模拟器，至于安卓真机调试与安卓应用开发类似。苹果也一样，需要安装 Xcode 并启动模拟器。真机调试苹果相对比较麻烦，需要有开发者账号，将真机的 identifier（设备唯一标识符）加入到对应应用的开发设备中，这个可以自行百度搜索如何配置。

完成配置后，选择要运行的设备或模拟器（右下角会显示当前选定的设备，如果没选则是 No Device，如下图）,命令行运行 flutter run皆可完成编译和进入代码调试。

Flutter 应用在调试过程中是支持热重载的（pub 依赖改变了需要重新编译），因此尽量使用热重载，毕竟编译一次时间停长的。

开发设备配置

如果是要运行模拟器，对开发的设备要求还是挺高的，推荐使用 Mac Pro（16GB 内存）进行开发。Windows 电脑的话至少也需要 16GB 内存，模拟器一旦运行起来那“呼呼”的风扇声让人听了感觉电脑干活挺累的！

来点小修改

运行起来 demo 了，不动手改改代码过过瘾都没什么太大感觉，我们来实现在屏幕中间显示 Logo，点击后切换图片的简单修改。

使用图片资源需要两个步骤，第一建立一个图片文件夹存放图片资源，第二是需要在 pubspec 文件中指定依赖的资源目录。新建一个 images 文件夹存放图片 d 文件，将图片文件（avatar.jpg 和 qrcode.jpg）放到 images 目录下。在 pubspec.yaml 文件中设置 assets 属性：

  flutter:
    uses-material-design: true    assets:      - images/avatar.jpg      - images/qrcode.jpg        # 其他配置

注意放置的位置不要弄错了，在 pubspec.yaml 中有相应的注释。配置完成后需要运行 flutter pub get命令更新一下依赖的资源。

主要代码如下所示：

class _MyHomePageState extends State<MyHomePage> {  List _imageNames = [    {'image': 'images/avatar.jpg', 'text': '岛上码农'},    {'image': 'images/qrcode.jpg', 'text': '扫码关注'}  ];  int _index = 0;
  void _onSiwtch() {    setState(() {      _index = (++_index) % _imageNames.length;    });  }
  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text(widget.title),      ),      body: Center(        child: Container(          width: 300,          height: 300,          child: Column(            children: [              Container(                width: 128,                height: 128,                margin: EdgeInsets.only(top: 10, bottom: 10),                child: Image.asset(                  _imageNames[_index]['image'],                  fit: BoxFit.cover,                ),              ),              Text(                _imageNames[_index]['text'],              ),            ],          ),        ),      ),      floatingActionButton: FloatingActionButton(        onPressed: _onSiwtch,        tooltip: '切换',        child: Icon(Icons.swap_horizontal_circle_outlined),      ),     );  }}

代码逻辑如下：_MyHomePageState 类是 MyHomePage 的 一个有状态组件，Flutter 的组件和 React 的类似，分为无状态和有状态，无状态组件无法进行数据更新，有状态组件有自己的数据状态，根据数据状态更新界面。

下划线_代表这个类、方法或成员变量是私有的，在类的外部无法访问。在_MyHomePageState 中定义了一个 Map <String, String>类型的数组（List）_imageNames 以及一个状态变量数组控制下标_index。当切换按钮点击时，会在_onSwitch 方法中通过 setState 更改状态变量_index 的值，从而引起界面的自动刷新。

页面组件的元素和层级如下：

• appBar：导航栏

• body：主界面

• Center：居中组件

• Container：页面元素容器，类似 html 的 div，通过这个 Container 指定界面中的尺寸和边距

• Column：纵向布局，即元素按纵向一次排布。

• 图片容器：用于限定图片的显示大小，边距等

• 图片：使用本地资源展示图片

• 文本：显示图片底下的文字

• floatingActionButton：悬浮按钮

可以看到整个页面的层次和 HTML 很像，实际上 Dart 最开始的设计就是想替换 Javascript 的，而 Flutter 本身很多理念仿照了 React。从代码也可以看到，界面的嵌套层级很多，这被很多人吐槽，实际只要我们将组件抽离，就可以有效减少嵌套层级（界面的写法也有点类似 JSX，只是 Flutter 内置了很多布局组件，简化了开发）。

最终效果

点击切换按钮图片和文字会随之变化。