Flutter应用教程-优快云博客

文档中并没有这部分内容,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(),
    );
  }

结束.