前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter版本玩Android(3)——文章详情页

Flutter版本玩Android(3)——文章详情页

作者头像
用户1108631
发布2019-08-18 22:36:33
8010
发布2019-08-18 22:36:33
举报
文章被收录于专栏:每天学点Android知识

本文主要包含路由的跳转以及WebView显示文章详情页。

效果如下:

路由跳转

Flutter通过Navigator类来进行页面路由的管理。

  • push:指定跳转的widget
  • pushNamed:命名路由,string--->widget

pushXXX表示跳转到下一页面,pop表示跳出当前页面,可以携带参数跳转。具体可以参考路由管理。

携带参数跳转

代码语言:javascript
复制
Navigator.of(context).pushNamed(RouteTableConst.ARTICLE_PAGE,                  arguments: {                    'url': articleItem.link,                    'title': articleItem.title                  });

获取前一个页面的参数

代码语言:javascript
复制
var args =        ModalRoute.of(context).settings.arguments as Map<String, dynamic>;    String url = args['url'];    String title = args['title'];

WebView的使用

引入webview_flutter,在文章详情页通过WebView去加载文章url,不过发现很多文章url都加载出错。 WebView的使用很简单:

代码语言:javascript
复制
class ArticlePageWidget extends StatefulWidget {  ArticlePageWidget();  @override  _ArticlePageWidgetState createState() => _ArticlePageWidgetState();}class _ArticlePageWidgetState extends State<ArticlePageWidget> {  @override  Widget build(BuildContext context) {    var args =        ModalRoute.of(context).settings.arguments as Map<String, dynamic>;    String url = args['url'];    String title = args['title'];    return MaterialApp(      home: Scaffold(        appBar: AppBar(          leading: IconButton(              icon: Icon(Icons.arrow_back),              onPressed: () {                Navigator.of(context).pop();              }),          title: Text(title),        ),        body: WebView(          initialUrl: url,        ),      ),    );  }}

添加WebView控制

添加WebViewController控制返回键,当WebView可以返回时,WebView返回;

代码语言:javascript
复制
eturn MaterialApp(      home: Scaffold(        appBar: AppBar(          leading: IconButton(              icon: Icon(Icons.arrow_back),              onPressed: () {                if (_controller != null) {                  _controller.canGoBack().then((canGoBack) {                    if (canGoBack) {                      _controller.goBack();                    } else {                      Navigator.of(context).pop();                    }                  });                } else {                  Navigator.of(context).pop();                }              }),          title: Text(title),          flexibleSpace: LinearProgressIndicator(),        ),        body: WebView(          javascriptMode: JavascriptMode.unrestricted,          initialUrl: url,          onWebViewCreated: (controller) {            _controller = controller;          },        ),      ),

不足

不足之处是WebView里面加载一个新的url,title没有跟着变化。

关于代码,可以参考:

https://github.com/wangli135/wan_android/tree/c4148602ad1d6c70093a4b01bc18323cef60da4b

参考

  • https://book.flutterchina.club/chapter2/flutter_router.html
  • https://pub.dev/packages/webview_flutter
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-08-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 每天学点Android知识 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 路由跳转
    • 携带参数跳转
      • 获取前一个页面的参数
      • WebView的使用
        • 添加WebView控制
        • 不足
        • 参考
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档