文档中并没有这部分内容,https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2 这个地址需要梯子.
在第2部分,可以学到什么:
和第一部分一样.
在第二部分构建什么?
构建一个无限的列表.当用户选择与取消选择时,保存选中的.在顶部的右侧导航栏,点击按钮,到一个新的页面,显示收藏的项.
动画图是:https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/img/b17de15fa7831a1c.png 是第一部分最后一张的梯子.
如果环境没有搭建完成,去查看第一部分.
开始添加图标到列表中
添加一个心形图标到每一行,然后接下来会把它做成可点击的.
添加_save到State中,这个Set集合存储着你点击收藏的项.Set比list好的地方是它不允许重复.
class RandomWordsState extends State<RandomWords> {
final List<WordPair> _suggestions = <WordPair>[];
final Set<WordPair> _saved = new Set<WordPair>(); // Add this line.
final TextStyle _biggerFont = const TextStyle(fontSize: 18.0);
...
}
在_buildRow()方法中,添加alreadSaved,确保项是否被添加收藏.
Widget _buildRow(WordPair pair) {
final bool alreadySaved = _saved.contains(pair); // Add this line.
...
}
同时需要添加心形图标到列表项对象中来启用收藏.下一步就是图标的交互操作了.
Widget _buildRow(WordPair pair) {
final bool alreadySaved = _saved.contains(pair);
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: new Icon( // Add the lines from here...
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
), // ... to here.
);
}
运行后可以看到效果,但不可交互.
添加交互:
先让心形图标可点击.当用户点击列表项,收藏的状态就改变,字符对就从收藏夹里移除或添加进.
需要修改_buildRow,如果已经添加到收藏夹中,点击就移除.点击时调用setState()来通知框架来更新状态.
添加onTap:
Widget _buildRow(WordPair pair) {
final alreadySaved = _saved.contains(pair);
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
onTap: () { // Add 9 lines from here...
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
}, // ... to here.
);
}
保存后,可以看到效果了
导航到下一个屏幕
这一步中,添加一个页来显示收藏夹,你会学到如何在主页与新页中的路由.
路由就看前面的章节就行了.
先添加一个AppBar的点击图标.当用户点击时,包含保存的收藏夹内容的路由就添加到Navigator中.
class RandomWordsState extends State<RandomWords> {
...
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Startup Name Generator'),
actions: <Widget>[ // Add 3 lines from here...
new IconButton(icon: const Icon(Icons.list), onPressed: _pushSaved),
], // ... to here.
),
body: _buildSuggestions(),
);
}
...
}
添加
void _pushSaved() {
}
热加载就可以看到图标了.
接下来,构建一个路由将它压入Navigator栈.这个行为将会产生的改变是在屏幕上显示新的页面.
void _pushSaved() {
Navigator.of(context).push(
);
}
ide会提示错误,接下来解决这个问题.
下面将添加MaterialPageRoute和构造器.现在先添加构建列表行的代码.divideTiles()方法添加了水平的分割线.divided变量针对每一行.
构造一个Scaffold,包含appbar,名字叫"保存的建议".新路由的内容是一个包含列表项的列表,并带有分割线.
通过热加载,可以看到效果.
使用主题来更新UI
这一步中,会修改主题,主题控制着你的app的外观,可以使用默认的主题,它依赖于设备或模拟器,或者自定义主题.
配置ThemeData类就可以轻松地改变主题.当前app使用的是默认的主题.主色是白色
修改颜色
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Startup Name Generator',
theme: new ThemeData( // Add the 3 lines from here...
primaryColor: Colors.white,
), // ... to here.
home: new RandomWords(),
);
}
结束.