Flutter学习总结(二、初识Dart)

初识Dart

一起从0开始学习Flutter!

上篇介绍了Flutter环境的搭建,并且创建了第一个Flutter项目,我们可以先运行一下万一也有一个Hello World等着呢,运行之后真的有一个示例项目,点击下面的按钮还能给我们看到数字的增加,那回来看一下Flutter项目的结构。
Flutter学习总结(二、初识Dart)_第1张图片
android,ios对应两个平台的包,lib是我们主要写Flutter的包,pubspec.yaml是Flutter的配置文件,我们以后要添加的library都是需要在这里进行配置。
先可以不用管这些项目的结构,我们直接打开lib里面的main.dart看下我们最关心的Flutter到底长什么样子。说实话我第一次打开的时候我是蒙的,这都是什么,淡定一下心神,一起来来揭开它的神秘面纱。

第一印象

先不用管它dart的语法,我们先来大概看一眼,可以简单总结一下看到的内容。

  1. 看到了熟悉的main函数,这里应该就是程序的入口了。还有个跟Lambda表达式很像的符号=>,估计是一样的作用。
void main() => runApp(MyApp());
  1. 通过下面的代码可以看到跟Java一样,也是通过Class来声明类,通过extends来声明继承,这里跟Java很像了,也是一样熟悉的Override,熟悉的方法格式,熟悉的返回格式,一开始害怕太难的顾虑消失了一半,通过上面的runApp里的参数我们差不多可以了解到这里build就是构建了我们一开始运行的页面,MaterialApp()里面的参数格式可能就陌生了,怎么参数都还带有名称呢?先记下来。
class MyApp extends StatelessWidget{
	@override
	Widget build(BuildContext context){
		return MaterialApp(
		title: 'Flutter Demo',
		....
		);
	}
}
  1. 接着往后面看,这里的参数为什么会有一个大括号,super前面为什么是:呢?这里也是我们以后需要多加注意的地方。
MyHomePage({Key key, this.title}) : super(key: key);

其他的基本上只剩一些控件的使用了,当我们学会dart语法后再来看这些控件就会简单很多了,一开始的我有一些疑问,给大家总结一下:

  • 我们原来布局用的xml和xib都去哪里了?
    Flutter没有再使用xml和xib来进行布局的编写,而是我们现在看到的一个个Widget来实现的,在Flutter中所有的都是组件,这个概念会一直伴随我们对Flutter的学习。
  • 是否可以实时查看布局的样式呢?
    现在还没有,看到网上一些截图说是支持了Hot UI,可能是测试版本的IDE,不过应该很快就会看到,现在支持的Hot Reload也能让我们快速的看到运行效果,比原生的每次重新build再运行看到结果快了不知道多少倍。

接下来踏踏实实的去学习Dart。

你可能感兴趣的:(Flutter)