Flutter APP代码结构

admin3个月前未命名576

我们先来创建一个全新的Flutter工程,命名为"github_client_app";创建新工程的步骤视读者使用的编辑器而定,都比较简单,在此不再赘述。创建完成后,工程结构如下:

github_client_app
├── android
├── ios
├── lib
└── test
1
2
3
4
5

由于我们需要使用外部图片和Icon资源,所以我们在项目根目录下分别创建“imgs”和“fonts”文件夹,前者用于保存图片,后者用于保存Icon文件。关于图片和Icon,读者可以参考第三章中相应的内容。

由于在网络数据传输和持久化时,我们需要通过Json来传输、保存数据;但是在应用开发时我们又需要将Json转成Dart Model类,现在我们使用在第十一章中“Json转Model”小节中介绍的方案,所以,我们需要在根目录下再创建一个用于保存Json文件的“jsons”文件夹。

多语言支持我们使用第十三章“国际化”中介绍的方案,所以还需要在根目录下创建一个“l10n”文件夹,用于保存各国语言对应的arb文件。

现在工程目录变为:

github_client_app
├── android
├── fonts
├── l10n-arb
├── imgs
├── ios
├── jsons
├── lib
└── test
1
2
3
4
5
6
7
8
9

由于我们的Dart代码都在“lib”文件夹下,笔者根据技术选型和经验在lib文件下创建了如下目录:

lib
├── common
├── l10n
├── models
├── states
├── routes
└── widgets
1
2
3
4
5
6
7
文件夹作用
common一些工具类,如通用方法类、网络接口类、保存全局变量的静态类等
l10n国际化相关的类都在此目录下
modelsJson文件对应的Dart Model类会在此目录下
states保存APP中需要跨组件共享的状态类
routes存放所有路由页面类
widgetsAPP内封装的一些Widget组件都在该目录下

注意,使用不同的框架或技术选型会对代码有不同的组织方式,因此,本节介绍的代码组织结构并不是固定或者“最佳”的,在实战中,读者可以自己根据情况调整源码结构。但是无论采取何种源码组织结构,清晰和解耦都是一个通用原则,我们应该让自己的代码结构清晰,以便交流和维护。


相关文章

原生开发与跨平台技术

1. 原生开发原生应用程序是指某一个移动平台(比如iOS或安卓)所特有的应用,使用相应平台支持的开发工具和语言,并直接调用系统提供的SDK API。比如Android原生应用就是指使用Java或Kot...

Hybrid技术简介

1. H5 + 原生这类框架主要原理就是将 App 中需要动态变动的内容通过HTML5(简称 H5)来实现,通过原生的网页加载控件WebView (Android)或 WKWebView(iOS)来加...

React Native、Weex

本篇主要介绍一下 JavaScript开发 + 原生渲染 的跨平台框架原理。React Native (简称 RN )是 Facebook 于 2015 年 4 月开源的跨平台移动...

Qt Mobile

在介绍 QT 之前我们先介绍一下 “自绘UI + 原生” 跨平台技术。#1. 自绘UI + 原生我们看看最后一种跨平台技术:自绘UI + 原生。这种技术的思路是:通过在不同平台实现一个统一接口的渲染引...

Flutter出世

“千呼万唤始出来”,铺垫这么久,现在终于等到本书的主角出场了!Flutter 是 Google 发布的一个用于创建跨平台、高性能移动应用的框架。Flutter 和 Qt mobile 一样,都没有使用...

搭建Flutter开发环境

搭建Flutter开发环境

由于Flutter会同时构建Android和IOS两个平台的发布包,所以Flutter同时依赖Android SDK和iOS SDK,在安装Flutter时也需要安装相应平台的构建工具和SDK。下面我...