Flutter版本玩Android(3)——文章詳情頁

xingfeng_coder發表於2019-08-09
FlutterAndroid

本文主要包含路由的跳轉以及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沒有跟著變化。

關於程式碼，可以參考：

github.com/wangli135/w…

參考

關注我的技術公眾號，不定期會有技術文章推送，不敢說優質，但至少是我自己的學習心得。微信掃一掃下方二維碼即可關注：

二維碼

相關文章