在挂载页面之前先讨论一个 Flutter 里的关键概念组件
组件
Flutter is all about widgets
Flutter 的一个重要概念：组件，组件就像一块块的积木（用于嵌套构建成用户所看到的界面）
所有都是组件
- 整个 app 是一个组件
- 页面是一个组件
- 组件可以包含着其他组件
- 组件不单只负责显示，也同时会有逻辑（比如按钮一般会包含事件）
因此如何将 Flutter 应用挂到不同平台上这种繁琐工作并不需要开发者关心，需要关心的是如何利用 Flutter 提供的组件去组合我们的界面与实现业务逻辑
你可以认为 Flutter 应用就是一个组件树：
- 有一个根组件包裹着整个 app
- 页面与页面之间是一个个不同的组件且可相互跳转
- 嵌套组件列表组件、用户表单组件等等
组件树
创建第一个组件
整个 Flutter 就是通过组件构建而成，因此我们来创建第一个组件
Flutter 中的组件可以被继承，此处有两个 dart 的关键字
class —— 面向对象语言（OOP）中 '类' 的概念
- 在 OOP 中所有都是对象
- 对象简单而言是一个数据组织方案（数据结构）
- 类允许你为对象创建的蓝图（里面有什么，可以做什么）
Classes are used to create objects - they serve as blueprint for objects.
- Flutter 里自带了不少类，同时我们需要创建自己的类
- 类的命名规则，首字母必须大写，多词可使用词首字母大写方式
- 可为类添加两种特征：
属性(Property)动作(Method)
extends —— 面向对象语言中 '继承' 的概念
Flutter 中的组件有特定的功能来将组件内容渲染到设备里，因此需要将我们自己编写的类继承 Flutter 中的组件类，以获得对应的能力
继承的组件类来自于 Flutter，因此需要导入 Flutter 包（dart 是模块化语言，意味着可以按模块进行加载）
import 'package:flutter/material.dart'; // 导入 Flutter 包下的 material 文件
// 继承导入 Flutter 包中的组件类
class MyApp extends StatelessWidget {
}
实现 build 方法
在 VS Code 里会发现 MyApp 下会出现红色波浪线，鼠标移动到该出会出现提示需要实现 build 方法。
VS Code 提示，需要实现 build 方法
为何需要实现 build 方法，因 Flutter 需要调用组件中的 build 方法将内容渲染到设备中
3 种方法实现：
- 输入 build -> 按下
tab 或回车，VS Code 会自动为我们补全代码 - 上图 IDE 提示的
Quick Fix...-> Create 1 missing override - 全手动输入
Widget build(BuildContext context) {
return null;
}
一条重要的规则：一个组件必须在 build 方法中返回另一个组件
在这里我们使用 Flutter 里的组件 MaterialApp：
- 用于包装整个应用的特殊组件，定义整个 app 的结构风格，包含导航，主题设定等等功能
- 每个页面上都会使用到的核心根组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(); // 注意这里必须带括号，因为这里创建了 MaterialApp 的对象
}
}
MaterialApp
MaterialApp 组件可通过具名参数（非位置参数）方式定义这个组件的结构与风格
具名参数：指该参数是带有指定名字，参数与参数间顺序无关
位置参数：指该参数是没有指定名字，受其位置决定
构造器需要什么参数可通过鼠标移动查看
- 参数名 home：是指当 app 加载后显示的第一个页面（组件），常用的值是
Scaffold - 组件 Scaffold：为应用创建一个新的白色页，同时可以加上 app bar（应用顶栏）等等
- 参数名 appBar：Flutter 提供了常用的应用顶栏，这里我们选用
AppBar - 组件 AppBar：提供
title参数，指一般为Text组件
文字难以描述关系，参考代码结构更为直观：
class MyApp extends StatelessWidget { // 最顶层的自定义根组件
@override
Widget build(BuildContext context) {
return MaterialApp( // 这个是 material 包裹的应用
home: Scaffold( // 一个可以设置页面结构的白色页面
appBar: AppBar( // 应用顶栏
title: Text('Hello world'), // 文字内容，这个字符串参数就属于位置参数
),
),
);
}
}
你会发现，所有的值都是组件。印证了 Flutter 官网的
The core of Flutter’s layout mechanism is widgets. In Flutter, almost everything is a widget—even layout models are widgets.
挂载界面到设备
最终挂载我们的根组件到 main 方法中，再运行我们的 Flutter 应用，就可以在模拟器上看到，我们的第一个 Hello world 应用
'main.dart'
import 'package:flutter/material.dart';
void main() {
print('hello world');
runApp(MyApp()); // 挂载我们的自定义根组件到 main 方法中
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Hello world'),
),
),
);
}
}
挂载到界面上的 Hello World
最终真正意义上的第一个 Hello World 已经在虚拟机上显示出来，接下来我们将继续学习更多的 Flutter 知识。
At the end of this part："Every thing is widget in Flutter."
See you soon.
网友评论