写一个HelloWorld程序

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

在环境搭建好之后,写HelloWorld 程序之前,首先要创建一个flutter 项目文件。

那如何创建一个flutter 项目文件呢?

请小伙伴们看另一篇简书:

已经了解的小伙伴们,可以跳过继续阅读(●'◡'●)。

一、HelloWorld整体代码

先快速写一个最简单的结构体,这个界面只包含两部分,头部订单的蓝色bar条和屏幕中间区域的内容。(人狠话不多,上代码)

这段代码是写在 根目录\lib\main.dart文件中,这就是Flutter的主文件。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'),
),
),
);
}
}

在Android Studio 软件中是这种效果,老规矩上图:

Android Studio

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

雷电虚拟机,百度可以下载,运行自动加载页面

二、Dart语法Function函数

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

比如我们写Hello World中的第2行,就是一个函数。void main() =>runApp(MyApp());

因为这个函数体里只有一行代码,所以可以直接使用=>来省略{},只有函数体里只有一行时,才可以使用,否则请使用大括号。 有点像ES6 里面的箭头函数。感兴趣的小伙伴可以去研究一下ES6语法,相信大家都已经知道了。

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

三、上面用到的 StatefulWidget 和 StatelessWidget

· StatefulWidget : 具有可变状态的窗口部件,也就是你在使用应用的时候就可以随时变化,比如我们常见的进度条,随着进度不断变化。

· StatelessWidget:不可变状态窗口部件,也就是你在使用时不可以改变,比如固定的文字(写上后就在那里了,死也不会变了)。

上面的HelloWorld 代码就继承了不可变窗口部件 StatelessWidget。

四、 再说一下,在VSCode中如何热加载

用VSCode编写Flutter不好的一点就是要手动加载更新应用,这至少会降低我们15%的工作效率。

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

VScode

来看几个重点的,也是一般常用的:

r 键:点击后热加载,也就算是重新加载吧。

p 键:显示网格,这个可以很好的掌握布局情况,工作中很有用。

o 键:切换android和ios的预览模式。

q 键:退出调试预览模式。

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

Debug

这个基本的结构很重要,小伙伴们可以多练习几遍,把基本结构记熟练。。。

一起加油ba。 阿巴阿巴阿巴。。。

阿巴