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)


相关推荐

  • 第九步:导航条的制作

    第九步:导航条的制作导航条之所以放在第九步讲,是因为导航条制作是本教程中最难的部分,自然也是技术含量最高的地方.导航条的制作可易可难,但这里介绍的相对较难,您能坚持到这一步已经很不易,如果你只是有个导航条就满足的话,请参看第八步的副导航条的制作。  先去掉导航条的红色背景,还有就是移除html文件中main-nav层的”class=”hidden””,使导航条的内容显示出来。我们实现导航条图片的变换的方法是纯cs

  • 一个perl线程使用方法的简单演示

    一个perl线程使用方法的简单演示

  • k8s集群的搭建安装(V1.18.0)

    k8s集群的搭建安装(V1.18.0)

  • sigaction介绍

    sigaction介绍sigaction原型:intsigaction(intsigno,conststructsigaction*restrictact,structsigaction*restrictoact);@signo信号编号@act要注册的信号动作@oact原信号动作

  • Windows系统日志分析_windows系统事件日志

    Windows系统日志分析_windows系统事件日志Windows操作系统的日志分析Windows日志简介Windows操作系统在其运行的生命周期中会记录其大量的日志信息,这些日志信息包括:Windows事件日志,Windows服务器角色日志,FTP日志,邮件服务日志,MSSQLServer数据库日志等。主要记录行为当前的日期、时间、用户、计算机、信息来源、事件、类型、分类等信息。用户可以通过它来检查错误发生的原因,处理应急事件,提供溯源,这些日志信息在取证和溯源中扮演着重要的角色。Windows日志事件类型Windows操作系统日志分析Wi

  • 网页音乐播放器接口

    网页音乐播放器接口1、Dewplayer音乐播放器2、我的博客首页虾米播放器代码:<embedsrc=”http://www.xiami.com/widget/0_1769834090/singlePlayer.swf”type=”application/x-shockwave-flash”width=”257″height=”33″wmode=”tra…

发表回复

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

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