Flutter框架基础

Flutter应用程序是由一些零散且有关联的控件组成的,那么控件是什么?控件,就是你在屏幕上看到那些东西。例如,一间教室相当于一个屏幕,它里面可以放椅子,也可以放桌子,教室就是一个控件。在这个教室里,放一张桌子,在上面写上“Hello World”这个经典名句,桌子就是一个控件,它上面写有文字。这相当于你在屏幕上放一个Text控件,然后在Text控件的data属性中写上“Hello World”这句话。你也可以在教室里放一把椅子,在它上面画上一幅画,这个凳子就是一个控件,它上面放一幅画。这就好比在屏幕上放一个Image控件,然后在Image控件的file属性中放一张图片。

因此,在开始设计第一个Flutter应用前,很有必要先了解Flutter的控件,因为你以后会经常和它们打交道。如果你已经创建了一个Flutter项目,会发现/lib目录下的每一个.dart(Flutter代码文件格式)文件的第一行都会导入flutter/material.dart包。

import 'package:flutter/material.dart';

material包是Flutter实现Material Design设计风格的基础包,其中有Text、Icon、Image等基础控件,有Align、Column、Decoration等布局控件,更多的还有异步控件、动画控件以及其他函数与方法。更多关于material包的细节,请访问Flutter API文档。

每一个Flutter项目的/lib目录下都有一个main.dart文件,打开该文件,里面应该有一个main()函数。Flutter使用Dart语言开发,而在Dart语言中,main()函数是Dart程序的入口,也就是说,Flutter程序在运行的时候,第一个执行的函数就是main()函数。

void main() => runApp(Widget app);

如果你是第一次接触Dart语言,可能会对上面的语法感到陌生,这是一种Dart语言特有的速写语法,将其展开后,完整语法如下所示。

void main() {
  return runApp(Widget app);
}

从上面的代码中可以看到,main()函数中只调用runApp函数,使用runApp函数可以将给定的根控件填满整个屏幕。你可能会有疑问,为什么一定要使用runApp函数?如果不调用runApp函数,项目也可以正常执行,但是屏幕上什么都不会显示。Flutter是Dart语言的移动应用框架,runApp函数就是Flutter框架的入口,如果不调用runApp函数,那你执行的就是一个Dart控制台应用。更多关于Dart语言的细节,请访问Dart API文档。

在Dart代码中,如果定义类时继承了StatelessWidgetStatefulWidget抽象类,说明该类是StatelessWidgetStatefulWidget抽象类的子类,即Flutter控件类。在Flutter框架中,控件类又细分为有状态控件类(继承StatefulWidget抽象类)和无状态控件类(继承StatelessWidget抽象类),两者的差别在于是否有状态。

Flutter框架的控件(Widget)

有状态控件类是具有可变状态的控件,创建一个有状态控件类的实例时,会调用StatefulWidget.createState抽象方法在控件树中的给定位置创建这个控件的可变状态,Flutter框架中的状态有两个特点:可以在构建控件时同步读取信息、在控件的生命周期内可以改变。当控件的配置被更改时会调用State.didUpdateWidget方法,此时框架会重新绘制控件。你也可以使用State.setState方法在状态发生变化时通知框架,告诉框架该对象的内部状态已经改变,框架接到通知后也会重新绘制控件。更多关于StatefulWidget抽象类的细节,请访问Flutter API文档。

状态(State<T>)生命周期

无状态控件类是不需要可变状态的控件,无状态控件的构建方法通常只在以下三种情况下被调用:第一次将控件插入到控件树中、第一次在控件的父级更改配置时、使用InheritedWidget抽象类(控件的基类)时。更多关于StatelessWidget抽象类的细节,请访问Flutter API文档。

控件(Widget)生命周期

在上面的图片中,有一个BuildContext抽象类,它表示一个控件在整个控件树中的位置句柄,每个控件都有自己的BuildContext实例。某些静态函数(例如showDialog、Theme.of等)也有BuildContext实例,以便它们可以代表调用控件或专门针对给定上下文获取数据。BuildContext对象被传递给WidgetBuilder函数,它为创建控件的函数签名,例如StatelessWidget.buildState.build

你也可以从State.context属性中获得BuildContext对象,在使用StatefulWidget.createState创建它们之前以及在调用initState之前,框架将State对象与BuildContext关联起来,该关联是永久的:State对象永远不会改变它的BuildContext(但是BuildContext本身可以在控件树中移动)。更多关于BuildContext抽象类的细节,请访问Flutter API文档。

看到这里的你估计是一脸懵逼的,不过没关系,现在先留一个印象,以后遇到相关内容时再回来看看。简单地总结一下本文:一个Flutter应用是由各种不同功能的控件组成的。当你想展示的内容只需要改动控件本身的配置信息就可以实现时,例如文本、图像等,可以考虑使用无状态控件(StatelessWidget)。如果你想展示的内容是可以动态改变才能实现时,例如滚动列表、动画效果等,可以考虑使用有状态控件(StatefulWidget)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,406评论 5 475
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,976评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,302评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,366评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,372评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,457评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,872评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,521评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,717评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,523评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,590评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,299评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,859评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,883评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,127评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,760评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,290评论 2 342

推荐阅读更多精彩内容