玖叶教程网

在flutter里面，跳转是根据route来实现的，如果是做前端的童鞋对这个肯定不陌生了。用法差别也不是很大。

Navigator用一个栈来管理app的route。比如，当你执行push的时候，route是发布到Navigator。来更新router视图显示。按下返回的时候，会从栈里返回最新的router出来。

紧跟第三节。没看第三节的请跳转到第三节第三节Flutter ListView Item添加图标并添加点击事件(ListTile)

我们准备做的是点击跳转到一个新的页面，叫收藏列表

第一步，我们现在AppBar的部分，新加一个组件，actions这里也跟android menu类似的，是一个数组，你放置多个的话，会自右向左排列（类似android的actionBar），

appBar: AppBar(
 title: Text('第一个列表'),
 actions: <Widget>[
 new IconButton(icon: const Icon(Icons.list), onPressed:navigateTo //自定义一个方法，来实现这个事件)
 ],
),
void navigateTo() {
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context){ 

//在这里生成新页面的显示内容,我们现在只是简单的展示一个Listview

 return new Scaffold( 
 appBar: new AppBar(
 title: const Text('Saved Suggestions'),
 ),
 body: new ListView(children: divided),
 ); 
}));
}

再来实现dividerd方法。

 final List<Widget> divided = ListTile
 .divideTiles(
 context: context,
 tiles: tiles,
 ).toList();
再来生成tiles， 
 final Iterable<ListTile> tiles = _saved.map(
 (WordPair pair) {
 return new ListTile(
 title: new Text(
 pair.asPascalCase,
 style: _biggerFont,
 ),
 );
 },
 );

完整代码如下。

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart'; // Add this line.
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 final wordPair = new WordPair.random(); // Add this line.
 return MaterialApp(
 title: 'Welcome to Flutter',
 home: Scaffold(
 appBar: AppBar(
 title: Text('第一个列表'),
 ),
 body: new Center(
 child: new RandomWords(),
 ),
 ),
 );
 }
}
class RandomWords extends StatefulWidget {
 @override
 RandomWordsState createState() => new RandomWordsState();
}
class RandomWordsState extends State<RandomWords> {
 final List<WordPair> datas = <WordPair>[];
 final Set<WordPair> selected = new Set<WordPair>(); // Add this line.
 final TextStyle _biggerFont = const TextStyle(fontSize: 18.0);
 @override
 Widget build(BuildContext context) {
 void navigateTo() {
 Navigator.of(context).push(
 new MaterialPageRoute<void>(
 builder: (BuildContext context) {
 final Iterable<ListTile> tiles = selected.map(
 (WordPair pair) {
 print(pair);
 return new ListTile(
 trailing: Icon(
 Icons.favorite,
 semanticLabel: "local",
 color: Colors.green,
 ),
 title: new Text(
 pair.asPascalCase,
 style: _biggerFont,
 ),
 );
 },
 );
 final List<Widget> divided = ListTile.divideTiles(
 context: context,
 tiles: tiles,
 ).toList();
 return new Scaffold(
 // Add 6 lines from here...
 appBar: new AppBar(
 title: const Text('Saved Suggestions'),
 ),
 body: new ListView(children: divided),
 ); // ... to here.
 },
 ),
 );
 }
 return new Scaffold(
 body: creatListWidget(),
 appBar: AppBar(
 title: Text("Navagate to"),
 actions: <Widget>[
 new IconButton(icon: const Icon(Icons.list), onPressed: navigateTo),
 ],
 ),
 );
 }
 Widget creatItem(WordPair pair) {
 final bool alreadySaved = selected.contains(pair); // Add this line.
 return new ListTile(
 isThreeLine: true,
 dense: true,
 leading: const Icon(Icons.add),
 subtitle: new Text(
 "这是副标题",
 style: _biggerFont,
 ),
 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,
 ),
 onTap: () {
 setState(() {
 if (alreadySaved) {
 selected.remove(pair);
 } else {
 selected.add(pair);
 }
 });
 },
 );
 }
 Widget creatListWidget() {
 return new ListView.builder(
 padding: const EdgeInsets.all(16.0), //是listView的padding
 scrollDirection: Axis.vertical, //可以不写，默认为竖向列表的
 itemBuilder: (BuildContext _context, int i) {
 if (i.isOdd) {
 return new Divider();
 }
 final int index = i ~/ 2;
 // If you've reached the end of the available word
 // pairings...
 if (index >= datas.length) {
 // ...then generate 10 more and add them to the
 // suggestions list.
 datas.addAll(generateWordPairs().take(10));
 }
 return creatItem(datas[index]);
 });
 }
}

这样一个简单的跳转就完成了，演示效果如下