P05.Flutter 编写一个HelloWorld程序

Flutter 环境搭建好后，按照惯例就是写一个 HelloWorld 程序，本文就用最简单的结构，写一个 Hello World，并介绍一下相关的 Dart 语法。

HelloWorld 整体代码

在根目录/lib/main.dart文件中，这就是 Flutter 主文件。

先删掉 main.dart 里面的全部代码，然后我们快速写一个最简单的结构体，这个界面只包含两部分，头部订单的蓝色 bar 条和屏幕中间区域的内容。

代码如下：

import 'package:flutter/material.dart';
//主函数（入口函数），下面我会简单说说 Dart 的函数
void main() =>runApp(MyApp());
// 声明 MyApp 类
class MyApp extends StatelessWidget{
  //重写 build 方法
  @override
  Widget build(BuildContext context){
    //返回一个 Material 风格的组件
   return MaterialApp(
      title:'Welcome to Flutter',
      home:Scaffold(
        //创建一个 Bar，并添加文本
        appBar:AppBar(
          title:Text('Welcome to Flutter'),
        ),
        //在主体的中间区域，添加一个 hello world 的文本
        body:Center(
          child:Text('Hello World'),
        ),
      ),
    );
  }
}

写完后打开终端，运行flutter run,等待一小会，就会看到虚拟机中显示了Hello World的内容。

也许你对上面的语法还不够了解，但你不必惊慌，我们会一点点进行说明，那先来看一下 Dart 中的函数。

Dart 语法 Function 函数

Dart 是面向对象的语言，即使是函数也是对象，并且属于 Function 类型的对象。这意味着函数可以分配给变量或作为参数传递给其他函数。当然你也可以像 JavaScript 一样，调用一个函数。

比如我们写 Hello World 中的第 2 行，就是一个函数。

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

因为这个函数体里只有一行代码，所以可以直接使用=>来省略{}，只有函数体里只有一行时，才可以使用，否则请使用大括号。

记住：学习 Dart 语法时你要记住一条，Dart 里一切皆对象，包括数字和函数。

StatefulWidget 和 StatelessWidget

• StatefulWidget ： 具有可变状态的窗口部件，也就是你在使用应用的时候就可以随时变化，比如我们常见的进度条，随着进度不断变化。
• StatelessWidget：不可变状态窗口部件，也就是你在使用时不可以改变，比如固定的文字（写上后就在那里了，死也不会变了）。

这个 HelloWorld 代码就继承了不可变窗口部件StatelessWidget。

VSCode 中如何热加载

用 VSCode 编写 Flutter 不好的一点就是要手动加载更新应用，个人感觉这至少会降低 10%的工作效率。

当我们运行flutter run以后，会有一段红色文字的提示，说明了我们可以作的事情。

我们来看几个重点的：

• r 键：点击后热加载，也就算是重新加载吧。
• p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。
• o 键：切换 android 和 ios 的预览模式。
• q 键：退出调试预览模式。

常用的一般就这些，剩下的命令以后碰到我们再进行讲解。

如果你觉的这太麻烦了，我们可以开启 Debug 模式，这时就可以实现真正的热加载了（我们保存，效果立即就会改变），但有时报错也挺烦人的。（下图时 Debug 模式）

本文呢算我们上手编写代码的第一节，这个基本的结构很重要，小伙伴们可以多练习几遍，把基本结构记熟练。