我的第一个 Flutter 应用之旅

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

创建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

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

image.png

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

• android：安卓原生工程配置相关文件，包括应用图标，原生资源，权限配置等，可以参考之前的关于安卓打包发布的文章：Flutter 如何发布安卓应用？
• 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皆可完成编译和进入代码调试。

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

开发设备配置

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

来点小修改

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

使用图片资源需要两个步骤，第一建立一个图片文件夹存放图片资源，第二是需要在 pubspec文件中指定依赖的资源目录。新建一个 images 文件夹存放图片文件，将图片文件（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 内置了很多布局组件，简化了开发）。

最终效果

helloworld.jpg

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