Flutter简介

Flutter简介

Flutter是Google开源的移动应用框架,一套代码能完成跨平台(AndroidIOS)移动应用的开发,对于Flutter而言,其有以下特点:

  • 现代响应式框架
  • 高速的2D渲染引擎
  • 方便快捷的开发工具
  • 各种组件库

下面我们将针对Flutter中的特性做简单介绍。

Widget简介

Flutter中,一个页面是由许多个Widget构建而成的树形结构,WidgetFlutter应用的基础组件,相当于Android原生中的View组件,一个Widget使用Dart语言编写,用于描述一部分可参与用户交互的界面,在Flutter中,几乎都是用Dart 编写的Widget组件。

Android Studio中新建一个Flutter项目并运行,运行完成后我们会发现在Android Studio右侧工具栏出现了Flutter Inspector选项,在该选项卡内,我们可以更深层级的理解上面这段话。

上图为Flutter Inspector中的Widgets面板中的内容(左侧为当前页面的截图),在这里我们可以看到页面上的所有元素都是Widget。当启动Widget Mode时,我们可以选中某一个Widget,同时应用对应区域上也会选中并提示Widget类型(此模式在真机和虚拟机上均适用,类似于Android原生的显示布局边界的功能,只不过这里显示的是单个Widget的边界),同时也会在面板上显示当前Widget的属性信息,这里就印证了我们前面说的在Flutter中,几乎都是用Dart编写的Widget组件,在界面发生变化时,我们可以通过图中的刷新按钮,来同步Widgets树到面板中。

随后我们切换到Widgets左侧的Render Tree面板:

从图中就可以看出我们的基础页面渲染组成仍然是类似于原生的树形结构。

Flutter中,所有元素都是Widget,并且Widget之间可以发生嵌套,并不像我们的Android原生独立出了ViewGroup,在Flutter中,Widget既可以是View也可以当做ViewGroup来用,下图中罗列的所有元素都是Widget,当然还有很多没有列举出来。

Flutter中,Widget分两类,一类具备State状态(StatefulWidget),一类不具备(StatelessWidget)即构建后静态不可变,UI界面刷新依赖于状态切换,这样节省了开发的状态管理,使得UI状态管理更加轻松,下图为StatefulWidget的生命周期:

Flutter框架简介

Flutter中,上层Dart语言编写的App在编译时被转化为对应的平台语言,执行效率更高。在界面渲染上Flutter采用Skia作为底层的图像引擎,渲染速度更快。整体的Flutter Framework如下图:

Flutter选用
Dart作为其开发语言,除了其语法开源等方面的因素外,主要还关乎Dart语言的编译方式,
Dart语言有两种编译时:

  • Just in time(JIT)
  • Ahead of time(AOT) JIT编译时支撑了FlutterHot reload开发模式(即代码热更新,修改后ctrl+s实时运行到真机或者模拟器上),使得整个开发过程更流畅,对界面的修改实时可见(当然这里的实时是相对Android原生的UI修改到验证速度而言的,这里重点为了说明其Hot reload模式的便捷性)。 AOT编译时支撑了Flutter的跨平台特性,在运行前编译时会把我们的Dart代码编译成对应的Arm代码。

Flutter应用目录结构

我们在Android studio或者cmd( 通过flutter create方式)创建的Flutter应用一般会生成四个目录

  • android Android平台的原生代码目录,有一些额外的原生逻辑可在该目录下处理
  • ios IOS平台的原生代码目录,有一些额外的原生逻辑可在该目录下处理
  • lib 跨平台的功能代码目录,该目录下的文件均使用Dart语言编写,在运行前编译时会将其编译成对应的ARM 代码,一般情况下,开发过程中我们只需要关注该目录就可以,在新建项目的项目中,该目录一般会自动生成main.dart文件,该文件为整个Dart部分代码的入口文件,其内部代码如下:
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: new Text(title),),
      body: Container(),
    );
  }
}
复制代码

其中main函数为整个Flutter部分的入口函数,相当于C语言的main函数,整个Flutter部分的代码调起均在该函数内(这也就意味着我们原来在Application中进行的数据初始化,全局变量初始化之类的操作,需要在该函数中完成,如果有需要的话)。 runApp函数指定Flutter部分的第一个Widget页面,随后运行就可以看到页面效果了 (这里描述为Flutter部分的主要原因是有可能存在Flutter混合原生开发的情况,不过一般存在混合的话会有FlutterActivity类的子类存在。)

  • tests 该目录下主要是Dart相关的一些测试代码目录

下面是我的公众号,欢迎大家关注。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/100907.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 深度学习中Dropout原理解析「建议收藏」

    深度学习中Dropout原理解析「建议收藏」1.Dropout简介1.1Dropout出现的原因在机器学习的模型中,如果模型的参数太多,而训练样本又太少,训练出来的模型很容易产生过拟合的现象。在训练神经网络的时候经常会遇到过拟合的问题,过拟合具体表现在:模型在训练数据上损失函数较小,预测准确率较高;但是在测试数据上损失函数比较大,预测准确率较低。过拟合是很多机器学习的通病。如果模型过拟合,那么得到的模型几乎不能用。为了解决过拟合问题,一…

  • Gson序列化对象时排除字段

    Gson序列化对象时排除字段

  • java 差的绝对值_java 绝对值问题[通俗易懂]

    /**输入一个正整数repeat(0/**输入一个正整数repeat(0读入1个正实数eps,计算并输出1-1/3+1/5-1/7+……,直到最后一项的绝对值小于eps为止(要求每一项的绝对值均大于等于eps,并以float类型输出数据)。例:括号内是说明输入2(repeat=2)1E-40.1输出0.78534820.83492064*/importjava.util.Scanner…

  • 股票实时数据接口api_股票开放接口api

    股票实时数据接口api_股票开放接口api免费股票数据API接口提供沪深、香港、美国股市信息。1.沪深股市2.香港股市3.美国股市4.香港股市列表5.美国股市列表6.深圳股市列表7.沪股列表API文档:https://www.juhe.cn/docs/api/id/21,申请获取APPKEY即可调用。示例代码PHP股票数据示例Python股票数据接口调用示例C#股票…

  • 极大似然估计的意义_极大似然估计原理思想

    极大似然估计的意义_极大似然估计原理思想极大似然估计是概率论中一个很常用的估计方法,在机器学习中的逻辑回归中就是基于它计算的损失函数,因此还是很有必要复习一下它的相关概念的。背景先来看看几个小例子:猎人师傅和徒弟一同去打猎,遇到一只兔

  • Apple Silicon M1 Mac如何恢复出厂设置

    Apple Silicon M1 Mac如何恢复出厂设置今天小编就来和大家讲述一下AppleSiliconM1Mac如何恢复出厂设置并还原的?Apple完全改变的AppleSiliconMac的一个方面是访问恢复模式的方式,这是重新安装MacOS,解决问题或彻底擦除硬盘驱动器所必需的工具,以防万一您必须将其退回或决定删除硬盘。在下面,您将找到如何进入“恢复模式”,包括其中的工具,最后是如何完全重置M1Mac。新的恢复模式看起来很相似,但使用起来却有所不同。如何在AppleSiliconMac上访问MacOSRecovery

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号