Flutter 实现webview与原生组件组合滑动

前言

欢迎关注我的Github和CSDN.

最近在用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静态页面, 可以尝试以下几个库, 不用看我这个麻烦的解决办法了:

• html
• flutter_html
• flutter_html_view

---

初步实现组合布局

选定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一块的.
尝试以下两种办法

1. 包裹SingleChildScrollView: 界面会消失不见, 因为Scrollview根据子布局处理高度, 而Expanded又要根据父布局处理高度, 所以互相依赖导致整个页面无法绘制.

   body: SingleChildScrollView(
           child: Column(
             children: <Widget>[
               Text('Title'),
               Expanded(
                 child: InAppWebView(initialUrl: 'https://juejin.im/timeline'),
               ),
             ],
           ),
         ),
   

2. 包裹SingleChildScrollView, 去掉Expanded: AppBar可以显示了, 但是InAppWebView没有高度了.

   body: SingleChildScrollView(
           child: Column(
             children: <Widget>[
               Text('Title'),
               InAppWebView(initialUrl: 'https://juejin.im/timeline'),
             ],
           ),