本文主要包含路由的跳转以及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没有跟着变化。
关于代码,可以参考:
参考
关注我的技术公众号,不定期会有技术文章推送,不敢说优质,但至少是我自己的学习心得。微信扫一扫下方二维码即可关注: