Flutter的目录结构以及基本架构

拉维

发布于 2019-08-12 15:58:33

5.8K0

发布于 2019-08-12 15:58:33

文章被收录于专栏：iOS小生活

Flutter的目录结构

如上图所示，就是一个Flutter工程的目录结构。

android——包含Android特定文件的Android子工程
build——是运行项目的时候生成的编译文件，即Android和iOS的构建产物
ios——包含iOS特定文件的iOS子工程
lib——Flutter应用源文件目录，我们自己写的Dart文件都放进lib文件夹中
test——测试文件
pubspec.yaml——管理第三方库及资源的配置文件

可以看到，除了Flutter自身的代码、资源、配置和依赖以外，Flutter工程还包含了Android和iOS的工程目录。

这不难理解，因为Flutter虽然是跨平台方案，但却需要一个容器最终运行到Android和iOS平台上，所以Flutter工程实际上就是一个同时内嵌了Android和iOS原生子工程的父工程：我们在lib目录下进行Flutter代码的开发，而某些特殊场景下的原生功能，则在对应的Android和iOS工程中提供相应的代码实现，供对应的Flutter代码引用。

Flutter会将相关的依赖和构建产物注入这两个子工程，最终集成到各自的项目中。而我们开发的Flutter代码，最终则会以原生工程的形式运行。

Flutter工程的基本架构

首先看这段代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

//自定义组件
class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('为人民服务！'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }

}

class HomeContent extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        '我希望世界和平',
        textDirection: TextDirection.rtl,
        style: TextStyle(
          color: Colors.red,
          fontSize: 40.0,
        ),
      ),
    );
  }

}

每一个Flutter项目都有一个lib目录，这个目录有有一个默认添加的文件main.dart，这个文件就是flutter的入口文件。

main.dart里面的 main 方法是Dart的入口方法。而 runApp 方法是Flutter的入口方法。

需要注意的是， void main() => runApp(MyApp()); 这行代码是如下代码的简化：

void main(){
  runApp(MyApp());
}

MyApp 是自定义的一个组件，在本例中，Flutter工程为 MyApp 类的一个实例。MyApp继承自StatelessWidget。StatelessWidget是无状态组件，即状态不可变的widget，这也就意味着，Flutter工程本身也是一个Widget。

还有一个是StatefulWidget，它是有状态的组件，持有的状态可能在widget生命周期改变。Widget需要依据数据才能完成构建，而对于statefulWidget来说，其依赖的数据在Widget生命周期中可能会频繁地发生变化。由State创建Widget，以数据驱动视图更新，而不是直接操作UI更新视图属性，代码表达可以更精炼，逻辑也可以更清晰。

有原生Android和iOS框架开发经验的同学，可能更习惯命令式的UI编程风格：手动创建UI组件，在需要更改UI时调用其方法修改视觉属性。而Flutter采用声明式UI设计，我们只需要描述当前的UI状态（即State）即可，不同UI状态的视觉变更由Flutter在底层完成。

虽然命令式的UI编程风格更直观，但是声明式UI编程方式的好处是，可以让我们把复杂的视图操作细节交给框架去完成，这样一来不仅可以提高我们的效率，也可以让我们专注于整个应用和页面的结构和功能。

在Flutter中，Widget是整个视图描述的基础，在Flutter的世界里，包括应用本身、视图、视图控制器、布局等在内的概念，都建立在Widget的基础之上。Flutter的核心设计思想是：一切皆Widget。

新建一个widget使用new关键词，但是new关键词可以省略。比如 runApp(MyApp()) 这行代码的全写是：