专栏首页Android先生学习Flutter之前,你先要了解这些

学习Flutter之前,你先要了解这些

序言

Flutter 出来已经有些日子了,越来越多的开发者也开始尝试使用 Flutter 进行开发,Flutter 是谷歌的移动UI框架,基于 Dart 语言,支持多端开发(Android、iOS、Web),听到这里是不是想要跃跃欲试了,由于LZ也正在踩坑的路上,所以有写的不对的地方还请多多指教。

官网

任何一门语言,官网都是最好的学习渠道,虽然说大多数都是英文的,但现在谷歌已经有很多都支持中文版本了:

Flutter中文官网:https://flutterchina.club/

安装

安装直接按照官网的来就行了,最主要的就是配置一下环境变量,下载下来的 flutter 包你可以理解为 java 中的 jar 包,开发的时候需要导入的。

特性

1、widget(相当于Android中的View)

我们都知道,在 Android 中页面是由很多个View来构成的,在 Flutter 中,Widget 用来构成页面上的内容,但是和 View 不同的是,Widget 是不可变的,有些人可能就有疑问了,不可变那岂不是静态页面,非也非也,那肯定有其他办法的咯,接着往下看:

1.1、不可变状态的小部件StatelessWidget

你可以将 StatelessWidget 理解成 Android 中的 ViewGroup,这是一个无状态的小部件,什么意思呢,就是当你的页面部分不依赖于对象配置信息外的其他任何内容时,简而言之就是你的页面是静态页面时,就可以使用它。

1.2、可变状态的小部件StatefulWidget

和 StatelessWidget 一样可以理解为 ViewGroup,但是它是有状态的,这个状态类似于 Activity 的生命周期,当你的页面需要动态的改变时,你就需要使用它。

注意

如果一个 Widget 发生了变化(用户与之交互),那么它就是有状态的;如果一个子 Widget 是有状态的,那么包裹它的父 Widget 可以是有状态的也可以是无状态的,简而言之,StatelessWidget 中可以包含 StatefulWidget,而 StatefulWidget 中也可以包含 StatelessWidget。

2、Android中的四大组件还有与之对应的吗

除了页面之外,其他的肯定都没有,因为毕竟是跨端开发的框架,不是专门为 Android 而设计的,可能有些人要问了,那如果想实现 Android 中的一些特殊的功能岂不是做不了了,非也非也,这个就属于另外一个知识了,卖个关子先,接着往下看;Activity 和 Fragment 在 Flutter 中都变成了 Widget。

3、资源文件

3.1、资源图片

在Android中资源图片有很多种分辨率,Flutter 遵循像iOS这样简单的3种分辨率格式: 1x, 2x, and 3x,在根目录下创建一个 images 的文件夹,然后再在 images 文件夹中创建三个文件夹用来存放不同分辨率的图片:

  • ../icon.png
  • ../2.0x/icon.png
  • ../3.0x/icon.png

然后,你需要在 pubspec.yaml 中配置这些图片,这个文件相当于Android中的 gradle文件。

3.2、字符串

在 Flutter 中,目前最好的做法就是新建一个类,用来声明你所需要的字符串

1声明:
2class Strings{
3  static String welcomeMessage = "Welcome To Flutter";
4}
5
6使用:
7new Text(Strings.welcomeMessage);

4、生命周期

在 Flutter 中,StatelessWidget 是没有生命周期的,只有 StatefulWidget 才有,我们一般通过挂接到WidgetsBinding观察并监听didChangeAppLifecycleState更改事件来监听生命周期事件,有以下这些生命周期:

  • resumed - 应用程序可见并响应用户输入。这是来自Android的onResume
  • inactive - 应用程序处于非活动状态,并且未接收用户输入。此事件在Android上未使用,仅适用于iOS
  • paused - 应用程序当前对用户不可见,不响应用户输入,并在后台运行。这是来自Android的onPause
  • suspending - 该应用程序将暂时中止。这在iOS上未使用

5、异步UI

Dart是单线程执行模型,支持Isolates(在另一个线程上运行Dart代码的方式)、事件循环和异步编程。 除非您启动一个Isolate,否则您的Dart代码将在主UI线程中运行,并由事件循环驱动。

当你进行网络请求时,可以在UI线程直接运行网络请求代码:

1loadData() async {
2  String dataURL = "https://jsonplaceholder.typicode.com/posts";
3  http.Response response = await http.get(dataURL);
4  setState(() {
5    widgets = JSON.decode(response.body);
6  });
7}

这里使用了 async/await 语法来调用API,你可以理解为,使用 async 之后这个方法就变成了异步的方法,然后需要等待(await)网络请求完成之后再执行下面更新语句;在 StatefulWidget 中,我们使用 setState 方法来更新UI操作,这会重新执行 build 方法。

6、组件

在 Flutter 中,有很多组件,他们可以构建成页面,因为组件繁多,所以这里我就不一一介绍了,我会在接下来的博客中为大家一一介绍 Flutter 中各种组件的使用方法,也欢迎大家持续关注后续博客。

  • 6.1、Flutter组件学习(一)—— Text组件: https://www.jianshu.com/p/b8cd2064efd7

最后

提醒一下大家,如果开发过程中有大的修改时,还是不要相信 Flutter 的热重载,在看到运行情况与实际不符时,卸载重装再来一遍。最后的最后,上一张LZ花了一天半时间入门的Demo:

Flutter解析Demo:https://github.com/24Kshign/FlutterWorkSpace/tree/master/flutter_app_test

i

本文分享自微信公众号 - IT先森养成记(cyg_24kshign)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 20分钟教你使用hexo搭建github博客

    备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇...

    用户2802329
  • 如何写出一篇登得上大雅之堂的技术博客

    本文原标题为:【Mac流派】程序猿修炼之道(7)-技能篇之如何写出一篇登得上大雅之堂的技术博客,后因标题如古时女人的裹脚布——又臭又长,遂改为:...

    用户2802329
  • 手把手教你在Android Studio 3.0上分析内存泄漏

    戳我下载 Android Studio 3.0:https://developer.android.google.cn/studio/index.html

    用户2802329
  • Flutter尝鲜:跨平台移动应用开发

    随着移动App开发成本越来越高,近几年,移动跨平台开发的呼声层出不穷,如FaceBook的推出React-Native,大受欢迎,但其性能并不如人意。

    开发的猫
  • Flutter混合开发

    使用Flutter从零开始开发App是一件轻松惬意的事情,但对于一些成熟的产品来说,完全摒弃原有App的历史沉淀,全面转向Flutter是不现实的。因此使用Fl...

    xiangzhihong
  • Flutter 可能是开发移动应用的最佳解决方案

    众所周知,Java 和 Objective-C 是开发高质量 Android 和 iOS App 的首选。大多数开发人员通过这些编程语言制作足够健壮的 APP。

    出其东门
  • Flutter Lesson 1:Flutter之环境搭建

    就在几天前(2019年05月08日),Google发布了新一版本的Flutter,同时伴随着巨大的更新。之前的Flutter顶多就是跨Android与IOS平台...

    踏浪
  • 来,给大家推荐几个开源Flutter应用

    官网看完了,文章看篇又一篇,FlutterGallery也把玩了一遍,是不是觉得空学一身武艺?是不是特别想实战一下?或者是不是想看看别人是怎么做的?那请看看下面...

    JarvanMo
  • Debezium教程翻译01:概览

    Debezium是一组分布式服务,用于捕获数据库中的更改,以便应用程序看到这些更改并作出响应。Debezium在一个变更事件流中记录每个数据库表中所有行级别的变...

    IT云清
  • Gank Alfred Workflow

    下载最新版本的workflow文件双击使用Alfred打开即可,workflow也已提交到Packal。

    宅男潇涧

扫码关注云+社区

领取腾讯云代金券