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

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

效果如下:
文章详情页

路由跳转

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

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

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

携带参数跳转

Navigator.of(context).pushNamed(RouteTableConst.ARTICLE_PAGE,
                  arguments: {
                    'url': articleItem.link,
                    'title': articleItem.title
                  });

获取前一个页面的参数

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的使用很简单:

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返回;

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

参考

关注我的技术公众号,不定期会有技术文章推送,不敢说优质,但至少是我自己的学习心得。微信扫一扫下方二维码即可关注:
二维码

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页