前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter的目录结构以及基本架构

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

作者头像
拉维
发布2019-08-12 15:58:33
5.7K0
发布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工程的基本架构

首先看这段代码:

代码语言:javascript
复制
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()); 这行代码是如下代码的简化:

代码语言:javascript
复制
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()) 这行代码的全写是:

代码语言:javascript
复制
runApp(new MyApp())

Widget是组件视觉效果的封装,是UI界面的载体,因此我们还需要为它提供一个方法,来告诉Flutter框架如何构建UI界面,这个方法就是build。

在build方法中,我们通常通过对基础Widget进行相应的UI配置,或是组合各类基础Widget的方式进行UI的定制化。比如在MyApp中,我通过MaterialApp这个Flutter APP框架设置了应用首页,即Scaffold。

MaterialApp是一个方便的Widget,是用于构建Material设计风格应用的组件封装框架,它封装了应用程序级别的一些Widget。一般作为顶层Widget来使用

其常用的属性如下:

  • home,主页,即应用的首页
  • title,标题
  • color,颜色
  • theme,主题

Scaffold是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。

Scaffold有下面几个主要属性:

  • appBar,显示在界面顶部的一个AppBar,即页面的导航栏
  • body,当前界面所显示主要内容的widget
  • drawer,抽屉菜单控件

以上。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-07-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 iOS小生活 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档