本文主要包含路由的跳转以及WebView显示文章详情页。
效果如下:
Flutter通过Navigator类来进行页面路由的管理。
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_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, ), ), ); }}
添加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
本文分享自 每天学点Android知识 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!