创建Flutter应用
可以通过命令行输入下面的命令创建一个flutter项目:
1 | flutter create first_flutter_app |
注意,项目名不支持特殊符号和大写,只能使用下划线进行分隔。
创建成功后通过相应的开发工具打开项目即可。
示例程序分析
示例程序中,主要Dart代码在lib/main.dart
文件中,这个文件是lutter启动的入口文件,包含main()
函数。
导入包
下面代码的作用是导入Material UI组件库。Material是一种标准的移动端和web端的视觉设计语言, Flutter默认提供了一套丰富的Material风格的UI组件。
1 | import 'package:flutter/material.dart'; |
应用入口
Flutter 应用中main函数为应用程序的入口。main函数中调用了runApp 方法,它的功能是启动Flutter应用。runApp接受一个Widget参数。
1 | void main() { |
在Flutter中,大部分都是widget,包括对齐(alignment)、填充(padding)和布局(layout)等功能,都是以widget的形式提供。
应用结构
1 | class MyApp extends StatelessWidget { |
MyApp类代表当前的Flutter应用,它继承了StatelessWidget
类,这也就意味着应用本身也是一个widget。
在Flutter开发中,我们可以继承自StatelessWidget或者StatefulWidget来创建自己的Widget类。
- StatelessWidget:没有状态改变的Widget,通常仅用来展示;
- StatefulWidget:需要保存状态,并且可能出现状态改变的Widget;
widget的主要工作是提供一个build()方法来描述如何构建UI界面(通常是通过组合、拼装其它基础widget)。
build()方法会在以下情况下执行:
- 当StatelessWidget第一次被插入到Widget树中时(也就是第一次被创建时;
- 当父Widget发生改变时,子Widget会被重新构建;
- 如果我们的Widget依赖InheritedWidget的一些数据,InheritedWidget数据发生改变时;
首页
1 | class MyHomePage extends StatefulWidget { |
MyHomePage是应用的首页,它继承自StatefulWidget类,表示它是一个有状态的组件(Stateful widget)。
一个Stateful widget至少由两个类组成:
- 一个StatefulWidget类;
- 一个 State类; StatefulWidget类本身是不变的,但是State类中持有的状态在widget生命周期中可能会发生变化;
State类
1 | class _MyHomePageState extends State<MyHomePage> { |
当按钮点击时,会调用_incrementCounter
方法,先自增_counte计数,然后调用setState
方法。
setState
方法的作用是通知Flutter框架,有状态发生了改变,Flutter框架收到通知后,会执行build方法来根据新的状态重新构建界面, Flutter 对此方法做了优化。
Scaffold
是 Material库中提供的页面脚手架,它提供了默认的导航栏、标题和包含主屏幕widget树的body属性,body是页面的内容部分。
核心逻辑
整个示例程序的核心逻辑是,当右下角的floatingActionButton
按钮被点击之后,会调用_incrementCounter
方法。在_incrementCounter
方法中,首先会自增_counter计数器(状态),然后setState
会通知Flutter框架状态发生变化,接着,Flutter框架会调用build方法以新的状态重新构建UI,最终显示在设备屏幕上。