【学习 Flutter】将页面渲染到设备

在挂载页面之前先讨论一个 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.