Flutter实战指南
上QQ阅读APP看书,第一时间看更新

2.4 创建Flutter小部件

现在App中没有任何内容,我们只写了一个main()方法,将来它将会被调用,但是我们不知道在main()方法里执行什么。上一节我们学习到整个Flutter应用都是由小部件组成的,所以我们应该写一个小部件。首先创建根小部件,要实现它需要使用Dart语言的一个特性——类。你可能在其他的语言中听说过这个概念,Dart是面向对象的编程语言,所以一切都是对象,一个对象就是一个简单的数据结构,类允许为对象创建属性和方法。Flutter提供了很多类供我们使用,但也可以创建自己的类。输入class关键字后,可以输入一个类名,类名以一个大写字母开头,然后输入名字,代码如下:

     classMyapp       //class关键字加上类名

这里将Myapp作为一个词使用,也可以使用多个词,每个词以大写字母开头,代码如下:

     classMyApp       //将MyApp作为多个词来命名

类的名称不能使用横线、下画线,这就是类。现在可以给这个类加一些特性,例如方法、变量,变量你可能从其他的语言中了解过,变量是简单的、小的数据结构,例如name='tom'。但是,如果想把一个混合的数据赋值给name,需要把name指向一个对象。

现在我们想创建一个小部件,一个小部件是一个对象,这个对象是由类来定义的,但是我们自己创建的类,Flutter不认为它是一个小部件类,因为一个小部件需要某些特性,因此我们的类必须继承其他的类,继承使用extends这个关键字,允许继承一个类,意味着当前类继承了这个类的所有特性,然后你可以使用这些特性或者添加自己的特性。如果继承了Flutter的类,Flutter便会知道它可以安全地使用这个类的对象,并在屏幕上绘制一些内容。我们需要继承的类来自Flutter框架,所以需要了解特性import。编写代码时需要使用Flutter SDK框架中的代码,因此需要通过import关键字,引入需要的文件的路径,从这些特性可看出Dart是一门模块化的语言,同时也意味着可以将代码切分成多个文件,下面引入Flutter包中的文件,代码如下:

     import 'package:flutter/material.dart';//引入Flutter框架中的文件

我们通过package:加包名flutter,flutter包中包括很多的子包或者文件,可以通过/加文件名来定位文件,上述例子中引入了material.dart这个文件。现在我们可以继承这个文件中暴露的一些类。例如无状态小部件StatelessWidget、有状态的小部件StatefulWidget。

因为我们引入了对应的文件,所以这里继承StatelessWidget,代码如下:

     // Chapter02/02-04/lib/main.dart
     class Myapp extends StatelessWidget{       //继承无状态小部件
     …
     }

现在就可以把它作为一个小部件并显示在屏幕上了。这里还有一个很重要的事情需要说明,将在下一节介绍。