创建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皆可完成编译和进入代码调试。

开发设备配置

如果是要运行模拟器，对开发的设备要求还是挺高的，推荐使用 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 内置了很多布局组件，简化了开发）。

参考链接：https://juejin.cn/post/6962386416835756068

最后，Flutter资料分享

点击免费领取《Flutter完整开发实战详解》

一、Dart语言和Flutter基础

  • 环境搭建
  • Dart语言
  • Flutter的基础

二、 快速开发实战篇

  • 基础控件
  • 数据模块
  • 其他功能

三、 打包与填坑篇

  • Flutter开发过程的打包流程
  • APP包对比
  • 细节技巧与问题处理

四、 Redux、主题、国际化

介绍 Flutter 中 Redux 的使用，并结合Redux 完成实时的主题切换与多语言切换功能。

五、 深入探索

六、 深入Widget原理

七、 深入布局原理

八、 实用技巧与填坑

九、 深入绘制原理

十、 深入图片加载流程

十一、全面深入理解Stream

十二、全面深入理解状态管理设计

十三、全面深入触摸和滑动原理

十四、混合开发打包 Android 篇

文章篇幅有限，需要《Flutter完整开发实战详解》完整版资料，可以点击此处免费领取~