写点什么

flutter 之踩坑的日子 (2)

用户头像
霜蓝手环
关注
发布于: 2020 年 09 月 16 日
flutter之踩坑的日子(2)



上次说到,本次将从实际项目入手,讲解flutter开发过程中遇到的那些坑,以及flutter相关组件的使用。

那么,就从flutter的模板项目开始吧。

在VSCODE中,可以通过从命令面板输入指令的方法,使用flutter默认模板,创建一个新的项目。

与其他官方示例项目一样,这个项目中,包含了flutter中最典型以及最重要的内容。

首先要记住一件事,flutter中,一切都是widget。

这个词一般被翻译成组件,或者组装件,构造件。在这里采用组件的说法。组件分为有状态组件和无状态组件两种,它们构成flutter程序的界面,并且根据程序运行情况,实时更新。

无状态组件( StatelessWidget )构建界面。

有状态组件( StatefulWidget )处理内容更新。

官方项目的入口,是main.dart ,这个文件的主函数是main() ,使用runApp来处理程序逻辑,

void main() {
runApp(MyApp());
}

MyApp是主页面的实例化对象,同时也是一个无状态组件。

在flutter开发时,似乎不需要new ,就可以创建新的对象。在常见的高级语言里,new这个环节通常是不能省略,而且要和释放成对使用的。这里是DART语言和其他语言不同的地方。

class MyApp extends StatelessWidget

这行代码声明了一个名为MyApp的类,继承自 StatelessWidget。

@override

Widget build(BuildContext context)

接下来,这个类重载了build方法,这个方法用于构造MyApp本身,以及隶属于MyApp的所有下级组件。

return MaterialApp(

build方法返回了一个MaterialApp组件。这里可以看出,flutter描述组件的时候,是将组件某个具体参数的值包含在代码中的。因为组件的参数,也是其他组件,或者最直接的资源如文本,图片等。

项目中的MaterialApp的构造方法,使用了3个参数:title ,theme和home 。这其中最重要的是home,因为它是真正返回页面的组件,同时也是一个有状态组件。

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

// This is the theme of your application.

primarySwatch: Colors.blue,

visualDensity: VisualDensity.adaptivePlatformDensity,),

home: MyHomePage(title: 'Flutter Demo Home Page'),

);

}

另外需要注意的一点就是,这三个参数并非MaterialApp的全部构造参数,由于大部分的构造参数都具有默认值,所以我们在这里只选用了三个。

class MyHomePage extends StatefulWidget

MyHomePage才是真正处理了页面内容的组件,它继承自StatefulWidget,要求传递一个名为title的构造参数。最重要的是,它重载了createState方法,返回了一个类型为_MyHomePageState的状态类。

组件数据的变化,属于组件的状态,要在状态类中处理。

这里涉及到一个日常不太会考虑的小细节,对于手机平台来说,页面有可能被休眠,销毁,释放。所以调用页面类方法或者变量的时候,通常仅限于在本页面类内部。否则可能会尝试调用已经被销毁的页面方法,从而产生不必要的异常。

如果需要在页面之间传递参数或者值的话,有其他的方法。

下面来看MyHomePageState这个状态类的构造方法。这个类继承自State模板类.

class _MyHomePageState extends State<MyHomePage>

注意,一个有状态组件包括组件类和状态类两个类。其中状态类在组件类重载的createState方法中被实例化。

同时,状态类返回用于展示的组件。在这个项目里是Scaffold组件。这个组件是脚手架组件,用于构造基础的flutter软件页面。这个页面可以包括顶部标题区、组件区、底部导航区。

OK,下面将在这套模板项目的基础上,开发我们自己的项目。



发布于: 2020 年 09 月 16 日阅读数: 66
用户头像

霜蓝手环

关注

还未添加个人签名 2020.09.09 加入

还未添加个人简介

评论

发布
暂无评论
flutter之踩坑的日子(2)