欢迎光临
我们一直在努力

flutter入门与实战教程,这一篇效率文章就够了

本文针对的是Flutter的初学者,旨在让你以一种通俗易懂的方式入门。除了颤振代码,还将介绍语法、原理和特点等基础知识。相信这篇文章可以帮助你学习和理解Flutter。

跨平台技术简介

让我们来看看当前的一些跨平台方案。如果从前端渲染的角度来分类,大致可以分为以下几种方案。

WebView呈现

这个方案很好理解,现在很多项目都会嵌入H5页面。它是用JavaScript等前端技术开发的,在客户端用WebView渲染。这个方案目前被微信小程序使用。

Flutter入门这一篇效率文章就够了

Flutter入门这一篇效率文章就够了

它具有使用成熟的前端技术进行开发、学习成本低、开发效率高、支持动态代码发布等明显优势。

但是缺点也很明显,表现体验和原生的差距还是很大的。

本机控件呈现

由于WebView的性能不够好,所以有一种用本机控件呈现的方案。这个方案也是使用JavaScript开发的,但是不同的是它最终是通过调用本机控件来呈现的。这个方案的代表是Facebook的React Native。

Flutter入门这一篇效率文章就够了

Flutter入门这一篇效率文章就够了

由于使用本机控件进行呈现,性能体验将更接近本机。但是只是比较近,和原生还是有差距的,因为需要JavaScript和原生频繁的通信,通信效率比较低。

另外,由于需要适应各个平台的控件,有可能系统控件已经更新,但是框架本身没有更新,导致了一些问题。换句话说,该方案受到本机控件的限制。

绘图引擎渲染

然后就是主角。

在前端,如果完全不用原生控件,我们可以通过系统的绘图API来绘制一个用户界面。从这个角度来说,每个平台都可以使用一个统一接口的绘图引擎来绘制接口,这个引擎最终调用系统的API来绘制。这样它的性能可以接近原生,不受原生控件的限制,可以实现不同平台的统一UI。

Flutter就是这样一个开发框架。

Flutter入门这一篇效率文章就够了

Flutter入门这一篇效率文章就够了

Flutter 简介

跨平台用户界面解决方案

Flutter是Google开发的跨平台UI解决方案。换句话说,原则上只处理UI。如果涉及到平台本身的一些功能,比如调用蓝牙、摄像头等,一般需要本机代码才能操作。但是现在会有一些第三方库来帮助我们解决这些问题。

绘图引擎Skia

Flutter入门这一篇效率文章就够了

Flutter入门这一篇效率文章就够了

Flutter使用Skia作为其绘图引擎。Skia已经被谷歌收购。目前很多Google产品都是Skia画的,包括Android。

Android内置Skia,iOS没有,所以玩iOS安装包的时候,Skia会一起敲进去。结果,iOS的包在打包了同样的Flutter代码后,比Android的包还大。

开发语言Dart

Flutter入门这一篇效率文章就够了

Flutter入门这一篇效率文章就够了

Flutter使用一种叫做Dart的开发语言。Dart也是Google自己的,它是一种面向对象的语言,从中我们可以看到一些其他开发语言的影子。学起来不难。

当谈到跨平台解决方案时,我们可以发现其他解决方案基本上都是使用JavaScript作为开发语言,但是Flutter为什么不用呢?就因为Dart归谷歌所有?这个问题先留着,以后再说。

搭建开发环境

这里的部分简单拍下,具体施工流程可以在官网:查看

https://flutter-io.cn/docs/get-started/install

主要建筑步骤如下:

下载Flutter SDK

官网下载地址:

https://flutter.dev/docs/development/tools/sdk/releases

由于在中国的访问受限,这位官员为中国开发商树立了一个镜像:

https://flutter.dev/community/china

更新环境变量

解压缩后,将flutterin的完整路径添加到环境变量PATH中。

安装开发工具

理论上任何文本编辑器都可以用来开发Flutter应用,但是推荐的开发工具是Android Studio、IntelliJ、VS Code。因为官方的Flutter和Dart插件可以安装在这些开发工具上,获得更好的开发体验。本文使用Android Studio进行演示。

如果打算开发iOS应用,还需要安装Xcode。

安装插件

在开发工具的插件设置中,安装上面提到的Flutter和Dart插件。Flutter插件用于支持Flutter的运行、调试、热重装等功能,Dart插件提供代码输入验证、代码完成等功能。

Hello World!

一切从Hello World开始。让我们创建一个展示你好世界的项目。

在安卓工作室的欢迎页面上选择Start a new Flutter project,或者通过菜单栏中的File New New Flutter Project创建一个新的Flutter项目。

创建的项目包含两个文件夹,android和ios,这是标准的Android和iOS项目。我们的颤振代码存储在lib文件夹中。项目创建后,默认会带来一个计数器的例子。我们将把main.dart的代码改为Hello World:

import ‘ package : flutter/material . dart ‘;

void main()=RunApp(Myapp());

类MyApp扩展了StatelessWidget {

@覆盖

小部件构建(BuildContext上下文){

退货材料App(

home:脚手架(

应用程序栏:应用程序栏(标题:文本(“你好”)),

body : Center(child : Text(‘ Hello World!’,style : TextStyle(font size :(32))));

{}

{}

启动一个模拟器,或者连接到一个真实的机器,点击Run运行它,你可以看到这样一个界面:

Flutter入门这一篇效率文章就够了

Flutter入门这一篇效率文章就够了

先把具体代码混合一下就好了,后面再说。

Dart 语法

在写Flutter之前,先简单介绍一下Dart的语法。如果你有开发Java或者JavaScript的经验,有面向对象编程的思想,可以很快学会。

我们可以在测试文件夹下创建一个dart文件来编写测试代码。

变量声明

指定类型

像java一样,我们可以这样声明一个整形变量:

int num=666

var

同时,我们也可以像JavaScript一样用var声明:

var num=666

但与JavaScript不同的是,以下代码不会在JavaScript中报告错误,但会在Dart中报告错误:

var num=666

void main() {

num=’ 666//错误报告

{}

用于镖

var声明一个变量后,根据第一次赋值推断变量的类型,之后就不能改变类型了。也就是说JavaScript是弱类型语言,而Dart是强类型语言。

目标

如果非要这样写,那是可以的。将变量更改为对象,您将不会报告错误:

对象编号=666;

void main() {

num=’ 666

{}

像Java一样,Object是所有对象的基本类。但是在这种情况下,如果您想打印num的字符串长度,您将报告一个错误:

对象编号=666;

void main() {

num=’ 666

print(num . length);//错误报告

{}

因为长度属于String,所以系统只知道num是对象,而不是String。

动态的

如果还是要这样写,那就可以。Dart有一个唯一的关键字dynamic,因此如果您将对象更改为dynamic,您将不会报告错误:

动态数=666;

void main() {

num=’ 666

print(num . length);

{}

当我们运行这个文件时,我们可以看到字符串长度正确地打印在控制台上。

动态就是动态。如果声明了,系统会找到可用的属性和函数来调用。但这种写法并不安全,因为即使你拼错了属性名,编译器也不会报错,直到运行时才会报错。

功能

动态的

在Dart中,函数也可以被视为动态的,而不需要编写返回类型。在这种情况下,函数的类型是返回类型,如果没有返回,则是void类型。比如可以这样:

main() {

print(getNum()。长度);

{}

getNum(){

返回’ 666 ‘;

{}

运行后,字符串的长度可以正确打印。

用于参数传输

Dart中的函数也是一个对象,因此它可以作为参数传递,例如:

main() {

execute(print 666);

{}

print666() {

print(‘ 666 ‘);

{}

执行(功能有趣){

fun();

{}

可选参数

在Dart的函数参数中,有一个概念叫做可选参数。我们以文本控件文本为例。在源代码中,我们可以看到文本的构造函数是这样的:

常量文本(

this.data,{

钥匙钥匙,

这种风格,

this.strutStyle,

this.textAlign,

这个. textDirection,

这个地方,

这个. softWrap,

这个。溢出,

this.textScaleFactor,

这个. maxLines,

this.semanticsLabel,

})

首先,参数中有一个数据,是要显示的文本内容,是必选项。数据后面的一堆参数用大括号括起来。这些参数称为可选参数,这意味着这些参数可以传递也可以不传递。

如果我们想显示一个长文本,并且想把它限制在最多两行,我们可以这样创建一个文本:

新文本(‘ 666666666666 ‘,maxlines : 2);

可选参数广泛用于颤振。

异步的

将来的

在Dart中使用Future来处理异步任务。例如,我们现在延迟打印666一秒钟。代码如下:

void main() {

Future.delayed(新持续时间(秒: 1),(){

返回’ 666 ‘;

})。然后((数据){

//成功后执行

打印(数据);

})。catchError((e) {

//失败后执行

打印(‘错误’);

})。whenComplete(() {

//无论成败都会执行

打印(‘完成’);

});

{}

Future的语法和Promise很像。如果任务执行成功,将调用;如果失败,将调用捕获错误;无论成功或失败,都将调用完成时间。

异步/等待

如果你不喜欢上面的写法,或者想把异步转换成同步,可以用async和wait这两个关键词来转换。

让我们转换上面的代码并编写一个getString方法。返回的类型是Future,它将返回一个带有延迟的字符串。在main函数之后添加async关键字,在getString()之前添加wait。代码如下:

void main()异步{

print(wait GetString());

{}

getString() {

返回未来。延迟(新持续时间(秒: 1),(){

返回’ 666 ‘;

});

{}

运行后,可以看到字符串正常延迟一秒后可以打印出来。这里getString()返回的类型是Future,await getString()是延迟返回后返回的字符串。等待只能在异步函数中使用。

Async和await实际上是一个语法糖,最终转换成Future调用链的形式。

万物皆控件

接下来,回到Flutter,Flutter中最重要的概念之一就是Widget。

在本机开发中,我们可以在界面上区分视图、布局和视图控制器。但是在Flutter中,它们都属于一个统一的Widget模型。可以说,在Flutter界面中,一切都是一个Widget。

以前学面向对象的时候,我们都听过一句话,什么都是对象。我将在这里应用它,在万物皆控件.的旋舞

我对具体的控件做了简单的分类。

根控件

类MyPage扩展了StatelessWidget {

@覆盖

小部件构建(BuildContext上下文){

返回MyWidget();

{}

{}

所有控件都属于StatefulWidgetStatelessWidget.它们之间的区别在于,StatefulWidget拥有State,州,而StatelessWidget没有。

StatefulWidget

当一个控件是可变的,它应该用StatefulWidget来构建。StatefulWidget本身是不可变的,但是它持有的状态是可变的。

状态窗口小部件

当控件的状态固定不变时,可以使用状态小部件。我们之前写的Hello World使用了StatelessWidget。

容器

居中(

child: MyWidget()

(

通常,容器类控件将某些属性或配置应用于其子控件,例如控件的宽度、高度、背景和位置。

常用的容器控件包括容器、中心、填充等。

布局控制

列(子:小部件[

MyWidget1(),

MyWidget2()

])

布局控件可以与本机开发中的布局相比较。通常,它有一个子属性,用于接收控件数组并为这些控件进行特定布局。

常用的布局控件有行、列、堆栈、伸缩等。

基本控制

文本(‘ 666 ‘)

基本控件是常用的控件,如文字、按钮和图片。

常用的基本控件有文本、文本字段、按钮、图像等。

功能控制

(上下文)的导航器。push(material page route(builder :(context){

return NewPage();

}));

Flutter中还有一种控件,不影响UI布局,但是有一些特定的功能,比如页面跳转、事件监控、主题定义等等。我们称这种控制为功能控制。

常用的功能控件包括导航器、通知侦听器、主题等。

计数器

开始写Flutter代码。请记住,Flutter项目创建后,它带来了一个反演示。现在我们使用自己的代码再次实现它。代码修改如下:

import ‘ package : flutter/material . dart ‘;

void main()=RunApp(Myapp());

类MyApp扩展了StatelessWidget {

@控件覆盖

小部件构建(BuildContext上下文){

return material app(home : MyPage());

{}

{}

类MyPage扩展了StatefulWidget {

@覆盖

stateflewidget create state(){

返回MyPageState();

{}

{}

类MyPageState扩展了StateMyPage {

int num=0;

@覆盖

小部件构建(BuildContext上下文){

返回脚手架(

appBar: AppBar(

标题:文本(‘计数器’),

),

body: Center(

儿童:文本(

num.toString(),

样式:文本样式(字体大小: 36)

(

),

浮动动作按钮:浮动动作按钮(

儿童:图标,

onPressed: () {

setState(() {

num

});

}));

{}

{}

运行后,可以看到这个界面:

Flutter入门这一篇效率文章就够了666

Flutter入门这一篇效率文章就够了

每次点击按钮,数字就会增加一。让我们分析一下这段代码,看看其中使用的一些小部件。

StatefulWidget

因为页面中的数字会随着状态的变化而变化,所以页面使用StatefulWidget来代替。StatefulWidget不直接返回Widget,而是返回State,然后返回状态中的Widget。

脚手架

脚手架是一个标准的材料设计页面,包括标题栏、浮动按钮、侧滑菜单、底部导航栏等的配置。我们在这里使用标题栏、页面内容主体和浮动按钮浮动动作按钮。

AppBar

AppBar是标题栏。通过查看控件的构造方法,我们可以知道它的可配置属性。

AppBar的可选参数包括标题、

您还可以配置标题前面的内容引导、右侧的操作按钮和图标、控制垂直高度提升等。我们只传递了标题,所有其他属性都使用默认值。

中心

Center是一个容器类控件,其功能是在中心显示其子控件。

浮动动作按钮

熟悉Android开发的人应该都很熟悉这个控件,它是一个在页面右下角有特定样式的Button。参数中的onPressed是必选项,点击后要传递一个回调函数。

我们可以

根据这个例子,颤振有两个重要的特征。

响应式 UI

单击按钮后,我们将num变量增加一,并使用设置状态来通知状态已经更改。颤振会根据新的状态更新UI。如果你接触过小程序的开发,setState类似于小程序的setData。

在Flutter中,我们不需要使用set方法来更新UI。可变控件绑定到状态,这是Flutter的响应用户界面编程。

热重载

Android Q和iOS 13中,增加了黑暗模式,所以我们来玩一个黑暗主题。MaterialApp中有一个主题属性。让我们用:配置它

退货材料App(

theme: ThemeData.dark(),

home: MyPage()

);

复制代码

在这种变化之后,我们不想点击Run.我们可以看到,通过点击闪电图标Flutter Hot Reload,界面已经改变了:

Flutter入门这一篇效率文章就够了

Flutter入门这一篇效率文章就够了返回

这是Flutter的热重载.修改代码后,通过热重装,可以在设备上立即看到修改结果,可以大大提高开发效率。

下面介绍一下Flutter中的一些常见操作。

页面跳转

在Flutter中,使用导航器来管理页面跳转。比如跳转到一个NewPage,可以这样写:

(上下文)的导航器。push(material page route(builder :(context){

return NewPage();

}));

复制代码

推是用来堆的,pop是用来堆的。

使用MaterialPageRoute会模拟Android上跳转页面的截止效果。

本地图片

让我们看看如何显示本地图片。

首先,在根目录中创建一个新的文件夹来存储图片,例如图像,并将图片picture.png放入其中。

在根目录下找到pubspec.yaml文件,这是Flutter依赖配置文件,我们需要在这里配置刚才的图片:

assets:

– images/picture.png

复制代码

这样,我们可以使用图像控件来显示此图片:

image . asset(‘ images/picture . png ‘)

复制代码

引入第三方库

像node的npm和Android的jcenter一样,Flutter也拥有一个公共仓库pub.dev Pub.dev是Google的官方Dart仓库,在这里可以找到我们需要的包和插件。

属性

旋舞本身没有吐司,所以让我们访问一个。在pub.dev上搜索后,我决定使用fluttertoast:

Flutter入门这一篇效率文章就够了

Flutter入门这一篇效率文章就够了

根据说明,在pubspec.yaml文件中的“依赖项”下进行配置:

^3.1.0长笛独奏:

复制代码

点击Android Studio右上角的包获取同步,您可以使用它:

fluttertoast . ShowToast(msg : ‘ 666666 ‘);

复制代码

iOS 样式

上面使用的所有控件都是材料设计,它们都在颤振/材料镖包中。要使用iOS风格的控件,请使用flutter/cupertino.dart包:

导入“package : flutter/cupertino . dart”;

复制代码

IOS风格的控件基本都是从Cupertino开始的。让我们替换计时器页面中的控件:

导入“package : flutter/cupertino . dart”;

void main()=RunApp(Myapp());

类MyApp扩展了StatelessWidget {

@覆盖

小部件构建(BuildContext上下文){

返回Cupertinopp(home : MyPage());

{}

{}

类MyPage扩展了StatefulWidget {

@覆盖

stateflewidget create state(){

返回MyPageState();

{}

{}

类MyPageState扩展了StateMyPage {

int num=0;

@覆盖

小部件构建(BuildContext上下文){

返回CupertinoPageScaffold脚手架(

导航栏CupertinoNavigationBar(

Middle:文本(‘计数器’),

),

child:容器(

宽度:双。无限,

child:列(

主轴定位:主轴定位中心,

十字轴定位:十字轴定位中心,

children: Widget[

Text(num.toString(),style : TextStyle(font size : 36)),

CupertinoButton(

color : Cupertinocolors . active blue,

child : Icon(Cupertinionicons . add),

onPressed: () {

setState(() {

num

});

})

],

)));

{}

{}

效果如下:

Flutter入门这一篇效率文章就够了

Flutter入门这一篇效率文章就够了

编译方式

代码到此结束。先说编译方法。编程语言有两种编译方法。

准时制——运行时编译

Aot(提前)运行前编译

这要看他们是从哪个角度比较的。JIT,它的一个主要特点就是支持动态代码发布,也就是支持热更新。不过从性能上来说,AOT会更好,因为运行时不需要编译,运行效率会更高。

回到我们一开始留下的问题,为什么其他跨平台解决方案都用JavaScript,而Flutter用Dart开发?JavaScript是用JIT编译的,不支持AOT。而飞镖同时支持JIT和AOT。

Flutter在开发阶段使用JIT,让我们使用热过载,增加了开发效率。AOT被用于包装,以确保该应用程序的官方版本的性能。

热更新?

最后说一个大家都关心的事。Flutter支持热更新吗?前面说过,Dart支持JIT,所以技术上支持。但是目前不支持。在官方计划文档中,您可以看到:

Flutter入门这一篇效率文章就够了

Flutter入门这一篇效率文章就够了

至于原因,官方在这里说明了。一般来说,由于政策限制以及性能和安全性的考虑,暂时不支持。

结束

就这样结束了。因为你想在一篇文章中完成Flutter的基础知识,所以不涉及太多细节。如果想写Flutter代码,需要深入学习。但是我相信了解之后会容易学很多。

赞(0) 打赏
未经允许不得转载:斯凯创业 » flutter入门与实战教程,这一篇效率文章就够了
分享到: 更多 (0)