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 模式)
本文呢算我们上手编写代码的第一节,这个基本的结构很重要,小伙伴们可以多练习几遍,把基本结构记熟练。
码云笔记 » P05.Flutter 编写一个HelloWorld程序