在这个系列中,我们将学习如何使用google的移动开发框架flutter创建一个电商应用。本文是flutter框架系列教程的第一部分,将学习如何安装Flutter开发环境并创建第一个Flutter应用,并学习Flutter应用开发中的核心概念,例如widget、状态等。

本系列教程包含如下四个部分,敬请期待:

如何从零构建flutter应用如何在flutter中布局元素如何在flutter中组织数据如何在flutter中展示数据1. 开发环境安装与Flutter项目创建

Flutter的开发文档相当出色,请参考官方文档先安装开发环境。

一旦开发环境安装好,我们可以创建一个新的测试项目。我倾向于使用android studio,因为它为flutter应用的开发提供了一个完备的集成开发环境。你需要在Android studio中安装一个Dard语言插件。

现在启动Android Studio,你会看到初始化Flutter项目的选项:

a859748c7d3711b28fbf5d1b523bd239.png

从配置列表中选择**Flutter Application **。

ab70f2d6cd4f0cc224fec38c4af0fb6d.png

可以为你的第一个Flutter应用起一个酷炫的名字,不过如果你和我一样不善于起名,就用timer好了。

对话框的最后一步,会要求我们填写应用的包名:

6f74d512740acaafadf56481415e5621.png

接下来Flutter SDK就会为应用创建一个初始的目录结构,main.dart是应用执行的入口。

2. 编写并测试应用代码

在Flutter中,一切都是控件(widget)。Flutter应用中的图像、图标和文本都是widget。布局元素例如行、列、栅格等用来安排其他widget的位置、大小和对齐,而这些布局元素本身也是widget。

参考如下代码修改你的main.dart文件:

62d9470203addad19fef81740d3bbc5a.png

现在启动Android模拟器:

aefcb88d5579325a7a456b68dd4a6146.png

注意widget的焦点,我们接下来将修改MaterialApp的内容。先看一下原始版本:

272838d4052c76ba24d7c3f777f751b3.png

Flutter中的布局元素(也是widget)可以根据其是否支持包含多个widget,而简单地归类为两种类型。例如,Container、Padding只能包含一个子widget,而Row、Column则可以包含多个。

现在我们在Row布局中引入三个文本widget:

ea5527f3eafd454c2dc74b7fa1d0b774.png

现在看起来是这样:

5710ef3c86d3dda96193516e3d39b0d6.png

在我们开始设置组件的样式之前,建议先创建一个新的widget来处理样式问题,以便遵循DRY(Don't Repeat Yoursel)原则。

将三个子widget用一个自定义widget(后面解释)替换。现在main.dart文件变成:

24b5fef31bbe7926776cdfbd374458e6.png

b177d62f38118471464d372780e18c13.png

我不是很擅长用户界面,但是我们还是尽力吧,加点背景色,留点空白:

bdc2fecd030c5805fa7241db6180cd9b.png

d8cecf894cb1197cce62b413a41ceba1.png

同时,在文本下面插入一个按钮widget,修改后的代码运行结果如下:

cd2b54626287d88a7837653217c7ddff.png

现在到了app最不可或缺的部分了:状态。状态将持有timer的当前值和运行标识。我补充了一个TimerState类,它负责维护状态,同时构建widget树。

75f95b3467737eec352cc31d786ffd06.png

按钮用来切换timer的运行或者停止:

ef86b24dd3cf4faeee70e9e97a28f05a.png

Dart有个用于异步操作的优雅的模块。我们可以使用其Timer类来实现读秒。修改后的TimerAppState代码如下,注意我们已经重构Timer类并改名为TimerApp以避免与异步模块中的Timer类混淆:

b8bc274e0ca3f623b07bf3db0bdbc495.png

4324a202ae1e984321242992f0d4b4ad.png

好了,我们已经完成了第一个Flutter应用,完整的Dard代码可以在这里下载。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐