继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

flutter系列之flutter工程结构详解(android视角)

2019-02-14 18:05:019708浏览

qndroid

1实战 · 15手记 · 17推荐
TA的实战

   flutter出来也有一年多的时间了,这个东西呢,也是用来做跨平台的,是由google主推的,作用与weex,reactive native一样,flutter的各种优势及缺点呢,我们这里就不再多说了,网上有非常多的文章供大家参考,今天我们重点来分析一下,flutter工程与我们传统的android工程有什么区别,以及这些区别的作用。
在我们讲解本节课的内容之前,希望大家有一定的flutter基础和gradle基础,因为我们要分析的是最复杂最完整的flutter与原生的混编工程与传统的android工程的区别,在讲解区别的时候,我们又会讲解几个重要的gradle文件的作用,所以大家最好对这些知识有一个基本的了解,这样看起来才不会太吃力,好,下面我们正式开始本节课的内容。
   既然我们要讲解的是flutter工程,那么,我们首先先来创建一个flutter工程(混编工程,非纯flutter工程),如下图:
图片描述
如上图,下面我们就按个来分析,看一下一个flutter混编工程都有那些不同之处相对我们传统的android工程。首先第一个.gradle文件没有区别,里面就是我们当前工程使用的gradle的版本,接下来一个,就是我们的android文件夹,用来存放我们的android工程,再下来是我们的asset文件夹,用来存放flutter工程的资源,包括图片,字体,视频等任何资源文件,http_plugin大家先不看,因为他是一个插件工程,我们最后看,再下来是一个ios文件夹,里面当然是存放我们的ios工程的所有内容,再下来的lib文件夹,则是存放flutter代码的默认目录(可以修改名字,后面详细讲解),最后一个最重要的文件是pubspec.yaml文件,这个文件用来配置flutter工程所需要的依赖等,到这里其实我们就从整体上知道了,flutter工程有那些特别的地方,当然还只是停留在一个整体,下面我们以一张图来进行对比,从整体上我们来看一下与传统android工程的区别。
图片描述
从图中我们可以看到,其实flutter混编工程无非就是多了下面两部分,很容易理解,因为是跨平台的所以,需要一个ios的容器工程,最后一部分就是flutter工程本身的东西,包括他的资源和代码,以及依赖等。所以大家不要对flutter有恐惧觉得他有多复杂,其实只是多了一点点东西。
   下面我们就详细的讲解一下图中的各个部分,我们先从最简单的flutter工程来看,他有三个主要文件(夹),第一个lib文件夹,存放flutter部分代码,即一系列的dart文件,如图:
图片描述
所以如果想要学会写flutter,需要有一定的drat基础。第二部分资源文件asset文件夹,来看一下我这个工程里面放了那些内容,如图:
图片描述
我这个工程里主要存放了字体资源和各个模块的所用到的图。最后一个就是flutter工程自己的一个工程配置文件pubspec.yaml,下面我们来看一下这个配置文件里有哪些内容,如下:

#第一部分,工程相关的描述信息
name: flutter_module
description: A new Flutter module.
version: 1.0.0+1

environment:
  sdk: ">=2.0.0-dev.68.0 <3.0.0"

#第二部分,flutter工程本身所需要的依赖
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  device_info: 0.2.1
  intl: 0.15.7
  connectivity: 0.3.2
  english_words: ^3.1.0
  url_launcher: 4.0.1
  video_player: 0.7.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  #源码依赖http_plugin插件工程
  http_plugin:
      path: ./http_plugin/

  json_serializable: ^2.0.0
  build_runner: ^1.0.0
# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec

# 第三部分,flutter中的资源申明
flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
     - asset/images/
  fonts:
     - family: Raleway
       fonts:
         - asset: asset/fonts/raleway/Raleway-Regular.ttf
         - asset: asset/fonts/raleway/Raleway-Medium.ttf
           weight: 500
         - asset: asset/fonts/raleway/Raleway-SemiBold.ttf
           weight: 600
  module:
    androidPackage: com.imooc.fluttermodule
    iosBundleIdentifier: com.imooc.flutterModule

可以看到,也非常得简单,主要就是用来管理flutter工程本身的代码,依赖,资源。
   在了解了flutter工程特有的结构以后,我们来看一些复杂的内容,那么,我问大家,flutter工程的dart代码和资源是如何打入到我们最终的可执行文件apk中的呢,这下我们就要来看flutter工程如何与图中的android工程结合起来。由于此部分篇幅比较长,所以我们放到下一节课来讲解这部分内容。

打开App,阅读手记
6人推荐
发表评论
随时随地看视频慕课网APP