关于面试:Fluttervol0-＞-从MaterialApp开始

7次阅读

共计 4034 个字符，预计需要花费 11 分钟才能阅读完成。

???? 0

这是我的一个新系列——Flutter 学习。学习这个框架，次要是因为我始终想要做一个 Python 后端和挪动前端互相配合的一个利用，而 Python 没有挪动前端框架，并且我也并不太会手机或者是个人电脑的利用开发。因而，为了实现我的这个“指标”，我尝试了这个新生的框架。

???? 目录

  1. ✅ 我为何抉择 Flutter
  2. ❓ 所以，啥是 Flutter，Flutter 的开发环境如何部署
  3. ???? 了解Widget、Widget 树
  4. ???? 了解 StatelessWidget 和StatefulWidget
  5. ???? 了解 MaterialApp 和Scaffold
  6. ⛵ 实战：Hello, world
  7. ⚡ Hot Reload 与 Hot Restart

✅ 1

我为何抉择了 Flutter

首先，我是一个人在“单打独斗”。也就是说，我没什么团队，但在我的构想下，我的 App 是能够跨平台适配的。因为其余起因，我并没有足够的工夫齐全投身于利用的开发中。所以，我须要一个 跨平台框架。

另外，我喜爱 申明式 编写 UI 的形式。

并且，Flutter高保真、有性能。

❓ 2

所以，啥是 Flutter？

Flutter 介绍：
腾讯技术工程的文章 – 知乎

装置和环境配置：
​装置和环境配置 – Flutter 中文文档 – Flutter 中文资源

Flutter 应用 Dart 作为编程语言！如果想要入门 Flutter，写好一手 Dart 十分重要。Dart 的格调相似于 JavaScript，又像其余的一些语言。Dart 官方语言概览：
Dart 编程语言概览 – Dart 中文文档 – Dart 中国

???? 3

了解Widget、Widget 树

在 Flutter 中，Widget形成应用程序！从一个按钮，一个图标，再到一段文字，甚至到利用自身，都是 Widget。你能够将Widget 看作是 Web 开发中的“组件”。

Flutter 的 Widget 渲染采纳的是相似 React 的框架：当 Widget 的状态呈现变动，须要刷新界面时，框架会先计算从上一个状态转换到下一个状态所需的最小更改，再去刷新界面。

咱们能够看到，在 Widgets 层的上面，有：

  • Rendering（渲染层）
  • AnimationPaintingGestures（动画、绘图、手势）
  • Foundation（根底库层）

这些实现了根本层面的货色，是 Flutter 大厦的根底。不过，咱们用到的会比拟少，因为如此开发会导致程序的简短和简单——毕竟，如果没有必要，咱们不能在造轮子的工程外面自我打动。也就说，咱们一般来说用的最多的，就是封装好的Widget。

当然，如果你留神到了，那么，你会发现下面还有一层：

Material和Cupertino

Flutter 曾经帮咱们封装好了 Material（Android）格调和 Cupertino（iOS）格调的Widget！咱们能够间接应用曾经封装好的 Material 和 Cupertino Widget。这样一来，可能大大晋升开发效率，并且能够写出最靠近于 Native UI 的用户界面，疾速实现好看易用的应用程序。

了解组件树

在 Flutter 中，Widget的组合形式 是 Widget 树。

上面这个动图很好地阐明了 Flutter 的 Widget 树中“蕴含与被蕴含”的关系：

Flutter 的 Widget 树 –（动图是我本人做的，转载请注明出处）

在 Widget 树中，如果一个 Widget A 蕴含在 Widget B 内，则称 B 是 A 的 父 Widget，A 是 B 的 子 Widget。例如在方才的组件树中，MaterialApp 是 Scaffold 的父 Widget，Scaffold 是 MaterialApp 的子 Widget。

咱们还要意识一个概念——根 Widget(Root Widget)。根 Widget 就相当于 Widget 树的“宗师”，在方才的组件树中，根 Widget 就是 MaterialApp。Flutter 会默认将根 Widget 充斥屏幕。然而你必须留神到的一点是，如同在 HTML 中，最里面的 HTML 标签必须得是 <html>，在 Flutter 中，根 Widget必须 得是以下三个之中的其中一个：

  • MaterialApp

这是一个实现了 Material Design 组件的根 Widget，它的子 Widget 都是 Material 格调。
咱们最罕用到这个根 Widget，因为毕竟 Material Design 是 Google 亲儿子，它的反对最为健全，也最易于进行开发。

  • CupertinoApp

这是一个实现了 Cupertino（iOS）格调的根 Widget，它的子 Widget 都是 Cupertino 格调。

  • WidgetsApp

这是一个你能够自定义格调的根 Widget。其中海阔天空任你施展。

???? 4

了解 StatelessWidget 和StatefulWidget

StatelessWidget就是没有状态的Widget。如果它在程序运行时状态不须要扭转，就能够应用这种Widget。

StatefulWidget就是有状态的Widget。它在程序运行时，状态被容许产生扭转。

你编写的 Widget 均继承于这两个类中的其中一个。

一会儿咱们马上就会用到StatelessWidget。我当前会介绍StatefulWidget，目前咱们临时还用不着。

???? 5

了解 MaterialApp 和 Scaffold

咱们方才提到过，MaterialApp是根 Widget，这个根 Widget 表明了这个应用程序的交互界面采纳 Material Design 的Widget。如果想要应用 Material 格调的Widget，根 Widget 就必须采纳 MaterialApp。

Scaffold规定了这个界面的格局，包含了 AppBar，Body 等一系列的布局。这是 Material Design 界面的根本构造，应用这些布局也必须用Scaffold。

所以，一个常见的 Flutter App 的格局就是——它的根 Widget 是 MaterialApp，而这个成为了“土壤”的根 Widget 的子 Widget 就是Scaffold，咱们在Scaffold 内实现界面。

⛵ 6

实战：Hello, world——以及对前文所提及概念的再了解

import 'package:flutter/material.dart';

void main() => runApp(HelloWorld());

class HelloWorld extends StatelessWidget {
  @override
  Widget build(BuildContext buildContext) {
    return MaterialApp(
      title: 'Flutter Demo_0',
      home: Scaffold(
        appBar: AppBar(title: Text('It \'s JUST a greeter')
        ),
        body: Center(child: Text('Hello, world!')
        )
      )
    );
  }
}

家喻户晓，学习 Flutter 的最好办法，就是把 Source Code 怼到脸上本人了解。

咱们看第一句：

import 'package:flutter/material.dart';

这个语句导入了 flutter 库中的 material.dart，这个文件中蕴含了MaterialApp 及一系列 Material 组件的实现。

接下来：

void main() => runApp(HelloWorld());

main()是 Dart 程序的入口。runApp()能够让你的 Flutter App 运行起来，这个函数只须要传递一个参数，那就是你的根 Widget 的实例。

class HelloWorld extends StatelessWidget {

所有由你写进去的 Widget，都必须继承StatelessWidget 与StatefulWidget中的任意一个。这里继承了 StatelessWidget，意味着在程序运行的过程中，这个Widget 的状态不会发生变化。

而后，咱们 override 了一个 build() 函数，build()函数返回 Widget 的本体。这个函数传入一个参数 buildContext（它是BuildContext 类型），这是利用上下文。

MaterialApp有以下这几个属性

  • title

指的是利用过程的名称（不是利用名）

  • home

这个参数必须传入一个 Scaffold，在Scaffold 内实现界面

  • 其它

    • color

利用图标背景色彩

  • theme

传入一个 themeData 对象，是利用的主题数据

  • ……

Scaffold有以下几个属性

  • appBar

传入一个AppBar

  • backgroundColor

应用程序的背景色彩

  • body

应用程序次要要显示的内容

  • ……

AppBar的 title 属性我这里传入的是一个Text，示意界面顶栏要显示的题目。

Center示意其中的 Widget 在 x, y 轴上均居中显示。如果只有一个子 Widget 则将这个子 Widget 传入它的 child 属性，如有多个就将一个 <Widget>[] 传入 children 属性。

Text是文本。

最终，咱们实现了一个这样的界面：

⚡ 7

Hot Reload 和 Hot Restart

调试时，⚡图标代表Hot Reload。这能够在不从新编译利用包的状况下把代码上的变动立马在调试用的虚拟机（或实体机）中出现进去。

然而，在呈现以下状况时，Hot Reload 没有用：

  • 枚举类型更改为惯例的类或者惯例的类变为枚举类型
  • main() 办法里的更改
  • 全局变量（global variables）和动态字段（static fields）的更改
  • 代码更改会影响 APP 状态的不能应用 Hot Reload
  • 代码呈现编译谬误的不能应用 Hot Reload

在这种状况下，你能够应用 Hot Restart来实现疾速重启。

这两种 Flutter 个性均是放慢开发速度的利器。

???? -1

结语

目前，咱们就算是一起走入了 Flutter 的殿堂。在这之后，咱们会一起学习 Flutter 的各个组件，实现一个 Flutter App，并最终实现我的“指标”。

正文完
前端
发表至： 前端
2021-01-19
 0
自制图标
关于前端:解决elementUI的对话框Dialog组件点击自动跳转到页面顶部问题
关于前端:图说前端送给您百张前端技术图谱
关于前端:观察者网专访明道云CEO任向晖

站内搜索

-「」