现在来跟着编写一个简单的 Flutter app。
目录：
- 创建 Flutter app
- 使用外部包 (package)
- 添加一个有状态的部件 (Stateful widget)
- 创建一个无限滚动 ListView
- 添加交互
- 导航到新页面
- 使用主题更改 UI
1. 创建 Flutter app
这一步可以参考上篇文章：跨平台技术篇 - Flutter 安装配置，里面有创建 flutter app 的步骤。
- 1.1 修改 main.dart 的代码
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}
- 1.2 运行
- 1.3 代码分析
来分析一下 main.dart 代码所做的事：
- 本示例创建一个 Material APP，Material 是一种标准的移动端和 web 端的视觉设计语言，Flutter提供了一套丰富的 Material widgets。
- main() 函数使用了 (=>) 符号, 这是 Dart 中单行函数或方法的简写。
- 该应用程序继承了 StatelessWidget，这将会使应用本身也成为一个 widget。 在 Flutter 中，大多数东西都是 widget，包括对齐 (alignment)、填充 (padding) 和布局 (layout)。
- Scaffold 是 Material library 中提供的一个 widget，它提供了默认的导航栏、标题和包含主屏幕 widget 树的 body 属性。widget 树可以很复杂。
- widget 的主要工作是提供一个 build() 方法来描述如何根据其他较低级别的 widget 来显示自己。
- 本示例中的 body 的 widget 树中包含了一个 Center widget, Center widget 又包含一个 Text 子 widget。 Center widget 可以将其子 widget 树对齐到屏幕中心。
2. 使用外部包 (package)
在这一步中，你将开始使用一个名为 english_words 的开源软件包 ，其中包含数千个最常用的英文单词以及一些实用功能。你可以在 https://pub.dartlang.org/flutter/ 上找到 english_words 软件包以及其他许多开源软件包。
- 2.1 添加依赖
在 pubspec.yaml 中添加：
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
english_words: ^3.1.0
- 2.2 Package get 获取依赖包
点击右上角的 Package get 获取依赖包，控制台输出：
/Users/kuangzhongwen/Documents/flutter/bin/flutter --no-color packages get
Running "flutter packages get" in flutter_app... 1.8s
Process finished with exit code 0
- 2.3 main.dart 中引入 english_words
import 'package:english_words/english_words.dart';
- 2.4 使用 english_words 中的文字
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random()
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
// child: new Text('Hello World'),
// “驼峰命名法” (称为 “upper camel case” 或 “Pascal case” ),
// 表示字符串中的每个单词（包括第一个单词）都以大写字母开头。
// 所以，“uppercamelcase” 变成 “UpperCamelCase”
child: new Text(wordPair.asPascalCase),
),
),
);
}
}运行，或者热重载，可以看到，会随机显示一个字符：
3. 添加一个有状态的部件 (Stateful widget)
Stateless widgets 是不可变的，这意味着它们的属性不能改变，即所有的值都是最终的。Stateful widgets 持有的状态可能在widget 生命周期中发生变化，实现一个 stateful widget 至少需要两个类:
- 一个 StatefulWidget 类。
- 一个 State类。 StatefulWidget 类本身是不变的，但是 State 类在 widget 生命周期中始终存在.
在这一步中，你将添加一个有状态的 widget-RandomWords，它创建其 State 类 RandomWordsState。State 类将最终为 widget维护建议的和喜欢的单词对。
- 3.1 添加有状态的 RandomWords widget 到 main.dart
它也可以在 MyApp 之外的文件的任何位置使用，但是本示例将它放到了文件的底部。RandomWords widget 除了创建 State 类之外几乎没有其他任何东西。
class RandomWords extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new RandomWordsState();
}
}
- 3.2 添加 RandomWordsState 类
该应用程序的大部分代码都在该类中，该类持有 RandomWords widget 的状态。这个类将保存随着用户滚动而无限增长的生成的单词对，以及喜欢的单词对，用户通过重复点击心形 ❤️ 图标来将它们从列表中添加或删除。
class RandomWordsState extends State<RandomWords> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return null;
}
}
- 3.3 实现 RandomWordsState 的 build 函数
class RandomWordsState extends State<RandomWords> {
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random();
return new Text(wordPair.asPascalCase);
}
}
- 3.4 将生成单词对代的码从 MyApp 移动到 RandomWordsState 中
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new RandomWords(),
),
),
);
}
}
class RandomWords extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new RandomWordsState();
}
}
class RandomWordsState extends State<RandomWords> {
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random();
return new Text(wordPair.asPascalCase);
}
}每次热重载或重新启动应用程序时都会随机显示一个单词对。
4. 创建一个无限滚动 ListView
在这一步中，你将扩展 (继承) RandomWordsState 类，以生成并显示单词对列表。 当用户滚动时，ListView 中显示的列表将无限增长。 ListView 的 builder 工厂构造函数允许你按需建立一个懒加载的列表视图。
- 4.1 向 RandomWordsState 类中添加一个 _suggestions 列表以保存建议的单词对
该变量以下划线 _ 开头，在 Dart 语言中使用下划线前缀标识符，会强制其变成私有的。另外，添加一个 biggerFont 变量来增大字体大小。
class RandomWordsState extends State<RandomWords> {
// 数据源
final _suggestions = <WordPair>[];
// 字体大小 style
final _biggerFont = const TextStyle(fontSize: 18.0);
// ...
}看不懂 Dart 语法没关系，下一篇将来详细写 Dart 的语法。
- 4.2 向RandomWordsState 类添加一个 _buildSuggestions() 函数
ListView 类提供了一个 builder 属性，itemBuilder 值是一个匿名回调函数，接受两个参数：BuildContext 和行迭代器 i。迭代器从 0 开始，每调用一次该函数，i 就会自增 1，对于每个建议的单词对都会执行一次。该模型允许建议的单词对列表在用户滚动时无限增长。
Widget _buildSuggestions() {
return new ListView.builder(padding: const EdgeInsets.all(16.0),
// 对于每个建议的单词对都会调用一次itemBuilder，然后将单词对添加到ListTile行中
// 在偶数行，该函数会为单词对添加一个ListTile row.
// 在奇数行，该函数会添加一个分割线widget，来分隔相邻的词对。
// 注意，在小屏幕上，分割线看起来可能比较吃力。
itemBuilder: (context, i) {
// 在每一列之前，添加一个1像素高的分隔线widget
if (i.isOdd) return new Divider();
// 语法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整），比如i为：1, 2, 3, 4, 5
// 时，结果为0, 1, 1, 2, 2， 这可以计算出ListView中减去分隔线后的实际单词对数量
final index = i ~/ 2;
// 如果是建议列表中最后一个单词对
if (index >= _suggestions.length) {
// ...接着再生成10个单词对，然后添加到建议列表
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
});
}
- 4.3 对于每一个单词对，_buildSuggestions 函数都会调用一次 _buildRow
这个函数在 ListTile 中显示每个新词对，这使你在下一步中可以生成更漂亮的显示行，在 RandomWordsState 中添加一个 _buildRow 函数 :
Widget _buildRow(WordPair pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
}
- 4.4 更新 RandomWordsState 的 build 方法以使用 _buildSuggestions()
class RandomWordsState extends State<RandomWords> {
// 数据源
final _suggestions = <WordPair>[];
// 字体大小 style
final _biggerFont = const TextStyle(fontSize: 18.0);
Widget _buildSuggestions() {
return new ListView.builder(padding: const EdgeInsets.all(16.0),
// 对于每个建议的单词对都会调用一次itemBuilder，然后将单词对添加到ListTile行中
// 在偶数行，该函数会为单词对添加一个ListTile row.
// 在奇数行，该函数会添加一个分割线widget，来分隔相邻的词对。
// 注意，在小屏幕上，分割线看起来可能比较吃力。
itemBuilder: (context, i) {
// 在每一列之前，添加一个1像素高的分隔线widget
if (i.isOdd) return new Divider();
// 语法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整），比如i为：1, 2, 3, 4, 5
// 时，结果为0, 1, 1, 2, 2， 这可以计算出ListView中减去分隔线后的实际单词对数量
final index = i ~/ 2;
// 如果是建议列表中最后一个单词对
if (index >= _suggestions.length) {
// ...接着再生成10个单词对，然后添加到建议列表
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
});
}
Widget _buildRow(WordPair pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Startup Name Generator'),
),
body: _buildSuggestions(),
);
}
}
- 4.5 修改 MyApp 代码
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Startup Name Generator',
home: new RandomWords(),
);
}
}
- 4.6 查看效果
重新运行或者热重载，效果如下：
那么每个 item 都创建一个 Text widget，是不是不太妥，有没有缓存机制，后面的文章我们会来分析探讨。当然对于 Flutter 的下拉刷新这种控件，早就有人做出来了：
import 'package:pull_to_refresh/pull_to_refresh.dart';这篇文章先不做探讨。
5. 添加交互
在这一步中，你将为每一行添加一个可点击的心形 ❤️ 图标。当用户点击列表中的条目，切换其"收藏"状态时，将该词对添加到或移除出"收藏夹"。
- 5.1 添加一个 _saved Set (集合) 到 RandomWordsState
这个集合存储用户喜欢 (收藏) 的单词对。 在这里 Set 比 List 更合适，因为 Set 中不允许重复的值。
class RandomWordsState extends State<RandomWords> {
// 数据源
final _suggestions = <WordPair>[];
// 收藏的数据集合
final _saved = new Set<WordPair>();
// 字体大小 style
final _biggerFont = const TextStyle(fontSize: 18.0);
// ...
}
- 5.2 在 _buildRow 方法中添加图标
Widget _buildRow(WordPair pair) {
final alreadySaved = _saved.contains(pair);
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
// trailing 为 item 后置图标
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
);
}
- 5.3 添加交互
Widget _buildRow(WordPair pair) {
final alreadySaved = _saved.contains(pair);
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
// trailing 为 item 后置图标
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
onTap: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}为 item 添加点击事件，setState() 会触发 build 方法，使 widget 刷新。
- 5.4 查看效果
点击 item ❤️ 就会变红，再点击这个 item ❤️ 就会变灰。
6. 导航到新页面
在这一步中，你将添加一个显示收藏夹内容的新页面 (在 Flutter 中称为路由 (route))。你将学习如何在主路由和新路由之间导航(切换页面)。在 Flutter 中，导航器管理应用程序的路由栈。将路由推入 (push) 到导航器的栈中，将会显示更新为该路由页面。 从导航器的栈中弹出 (pop) 路由，将显示返回到前一个路由，和原生 Android 一个道理。
- 6.1 在 RandomWordsState 的 build 方法中为 AppBar 添加一个列表图标
将该图标及其相应的操作添加到 build 方法中：
void _pushSaved() {
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Startup Name Generator'),
actions: <Widget>[
new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),
],
),
body: _buildSuggestions(),
);
}
- 6.2 向 RandomWordsState 类添加一个 _pushSaved() 方法
void _pushSaved() {
Navigator.of(context).push(
new MaterialPageRoute(
builder: (context) {
final tiles = _saved.map(
(pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
final divided = ListTile
.divideTiles(
context: context,
tiles: tiles,
)
.toList();
return new Scaffold(
appBar: new AppBar(
title: new Text('Saved Suggestions'),
),
body: new ListView(children: divided),
);
},
),
);
}- 当用户点击导航栏中的列表图标时，建立一个路由并将其推入到导航管理器栈中，此操作会切换页面以显示新路由。
- 新页面的内容在 MaterialPageRoute 的 builder 属性中构建，builder 是一个匿名函数。添加 Navigator.push 调用，这会使路由入栈 (以后路由入栈均指推入到导航管理器的栈)。
- 添加 MaterialPageRoute 及其 builder。现在，添加生成 ListTile 行的代码。ListTile 的 divideTiles() 方法在每个 ListTile 之间添加 1 像素的分割线，该 divided 变量持有最终的列表项。
- builder 返回一个 Scaffold，其中包含名为 "Saved Suggestions" 的新路由的应用栏。 新路由的 body 由包含 ListTiles 行的ListView 组成，每行之间通过一个分隔线分隔。
- 6.3 查看效果
热重载应用程序。收藏一些选项，并点击应用栏中的列表图标，在新路由页面中显示收藏的内容。请注意，导航器会在应用栏中添加一个 "返回" 按钮。你不必显式实现 Navigator.pop，点击后退按钮返回到主页路由。
点击右上角图标跳转：
7. 使用主题更改 UI
在这最后一步中，你将会使用主题。主题控制您应用程序的外观和风格，你可以使用默认主题，该主题取决于物理设备或模拟器，也可以自定义主题以适应你的品牌。
- 7.1 通过配置 ThemeData 类轻松更改应用程序的主题
你的应用程序目前使用默认主题，下面将更改 primary color 颜色为白色。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Startup Name Generator',
theme: new ThemeData(
primaryColor: Colors.white,
),
home: new RandomWords(),
);
}
}热重载应用，请注意，整个背景将会变为白色，包括应用栏。Material library中的 Colors 类提供了许多可以使用的颜色常量， 你可以使用热重载来快速简单地尝试、实验。
- 7.2 查看效果
