前言
最近在用Flutter写一个新闻客户端, 新闻详情页中的内容 需要用Flutter的本地Widget和WebView共同展示 . 比如标题/上方的视频播放器是用本地Widget展示, 新闻内容的富文本文字使用webview展示html, 这样就要求标题/视频播放器与webview可以 组合滑动.
ps: 如果把新闻详情页都用html画出, 就不用考虑组合滑动的问题.
转载请标明出处: https://juejin.im/post/5c997f026fb9a070cd56a86d
找到支持与本地组件共存的webview控件
找一个可以与本地组件共存的webview控件是首要任务, 以下是我测试过的几个库:
flutter_WebView_plugin
: 不可以inline;webView_flutter
: 可能支持, 但是还没有发布;flutter_inappbrowser
: 可以实现组合布局, 所以选用了此库, 链接 https://github.com/pichillilorenzo/flutter_inappbrowser
另外, 如果仅是展示html静态页面, 可以尝试以下几个库, 不用看我这个麻烦的解决办法了:
初步实现组合布局
选定flutter_inappbrowser
后开始实现, 初步代码如下:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
Text('Title'),
Expanded( // 注意必须加这个, 否则webview没有高度
child: InAppWebView(initialUrl: 'https://juejin.im/timeline'),
),
],
),
);
}
这样会构建一个text和webview组合的界面, 不过这里webview自带滚动条, 滚动时是不带着title一块的.
尝试以下两种办法
- 包裹
SingleChildScrollView
: 界面会消失不见, 因为Scrollview根据子布局处理高度, 而Expanded又要根据父布局处理高度, 所以互相依赖导致整个页面无法绘制.body: SingleChildScrollView( child: Column( children: <Widget>[ Text('Title'), Expanded( child: InAppWebView(initialUrl: 'https://juejin.im/timeline'), ), ], ), ),
- 包裹
SingleChildScrollView
, 去掉Expanded
: AppBar可以显示了, 但是InAppWebView
没有高度了.body: SingleChildScrollView( child: Column( children: <Widget>[ Text('Title'), InAppWebView(initialUrl: 'https://juejin.im/timeline'), ], ),