---

一、添加事件

第三篇中我们做了一个滚动例表，在例表中，我们添加一个收藏按钮，点击收藏单词

1.需要声明一个收藏集合_saved

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];

  final _saved = new Set<WordPair>();

  final _biggerFont = const TextStyle(fontSize: 18.0);
  ...
}

2._buildRow中传入已经收藏的集合

_buildRow 相当于iOS中的cell,传入已经收藏的集合，同时添加一个星形图标

在这里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,
    ),
 //此处添加点击事件
  );
}

3.添加点击事件

onTap里面调用函数setState通知框架状态已改变

onTap: () {
      setState(() {
        if (alreadySaved) {
          _saved.remove(pair);
        } else {
          _saved.add(pair);
        }
      });
    },

二、导航跳转

1.导航栏由RandomWordsState管理

在build中的appbar中添加导航图标actions，点击图标进入新的路由（iOS中说的新页面）

class RandomWordsState extends State<RandomWords> {
  ...
  //push事件
 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(),
    );
  }
  ...
}

添加Navigator.push调用，这会使路由入栈（以后路由入栈均指推入到导航管理器的栈）

void _pushSaved() {
  Navigator.of(context).push(
  );
}

2.添加MaterialPageRoute及其builder

MaterialPageRoute相当于iOS中的controller，builder相当于didload

void _pushSaved() {
  Navigator.of(context).push(
  new MaterialPageRoute(
      builder: (context) {
      //
//在此设置导航栏的标题及页面内容
       return new Scaffold(
       appBar: new AppBar(
       title: new Text('Saved Suggestions'),
       ),
    //body为页面内容
   // body: new ListView(children: 传入的方法名),
      );
    );
   }

新路由显示已收藏的数据，传入已收藏的数据，设置每一个cell

void _pushSaved() {
  Navigator.of(context).push(
  new MaterialPageRoute(
      builder: (context) {
      //设置需要显示的cell
         final tiles = _saved.map(
                  (pair) {
                return new ListTile(
                  title: new Text(
                    pair.asPascalCase,
                    style: _biggerFont,
                  ),
                );
              },
            ).toList();
            
//在此设置导航栏的标题及页面内容
       return new Scaffold(
       appBar: new AppBar(
       title: new Text('Saved Suggestions'),
       ),
    //body为页面内容
    body: new ListView(children: tiles),
      );
    );
   }

为每一个cell添加分割线

void _pushSaved() {
  Navigator.of(context).push(
  new MaterialPageRoute(
      builder: (context) {
      //设置需要显示的cell
         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为页面内容
    body: new ListView(children: divided),
      );
    );
   }

---

三.使用主题更改UI

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primarySwatch:Colors.red,//不知道为啥设置白色不可用
      ),
      home: new RandomWords(),
    );
  }
}