flutter 路由与导航

参考链接

1. 简单的导航跳转
  • 第一个页面
class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("FirstScreen"),),
      body: Center(
        child: RaisedButton(
          child: Text("Launch Second Screen"),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(
              builder: (context) => SecondScreen(),
            ));
          },
        ),
      ),
    );
  }
}
  • 第二个页面
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Second Screen"),),
      body: Center(
        child: RaisedButton(
          child: Text("Back"),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}
  • main
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
    );
  }
}
列表跳转的小例子
  • 文章的模型
// 文章model
class Article {
  String title;
  String content;

  Article({this.title,this.content});
}
  • 文章列表
// 文章列表
class ArticleListScreen extends StatelessWidget {

  final List<Article> articles = List.generate(
          10,
          (index) => Article(
            title: "Article $index",
            content: "Article $index : 离离原上草,一生一世枯荣. 野火烧不尽,春风吹又生.",
          ),
  );

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: articles.length,
      separatorBuilder: (context,index) {
        return Divider(height: 0.5,color: Colors.grey,);
      },
      itemBuilder: (context,index) {
        return ListTile(
          title: Text(articles[index].title),
          onTap: () async {
            String result = await Navigator.push(
              context,
              new MaterialPageRoute(
                builder: (context) => new ContentScreen(article: articles[index],),
              ),
            );

            if (result != null) {
              Scaffold.of(context).showSnackBar(
                new SnackBar(
                  content: new Text("$result"),
                  duration: const Duration(seconds: 1),
                ),
              );
            }
          },
        );
      },
    );
  }
}
  • 内容界面
class ContentScreen extends StatelessWidget {

  final Article article;
  ContentScreen({this.article});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("${article.title}"),
      ),
      body: Padding(
        padding: new EdgeInsets.all(15.0),
        child: new Column(
          children: <Widget>[
            new Text('${article.content}'),
            new Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                new RaisedButton(
                  onPressed: () {
                    Navigator.pop(context, 'Like');
                  },
                  child: new Text('Like'),
                ),
                new RaisedButton(
                  onPressed: () {
                    Navigator.pop(context, 'Unlike');
                  },
                  child: new Text('Unlike'),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}
  • 实现
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Articles List"),),
        body: ArticleListScreen(),
      ),
    );
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。