WebView CustomScrollView + Floating AppBar答案

【问题标题】：WebView CustomScrollView + Floating AppBarWebView CustomScrollView + Floating AppBar
【发布时间】：2019-01-16 15:08:42
【问题描述】：

我正在尝试创建一个具有 WebView（来自 webview_flutter: ^0.3.5+3）和 AppBar 的屏幕，我想在用户滚动时将其滚动到屏幕外。

我偶然发现了这个 guide 并尝试实现类似的东西，但没有骰子。
有没有办法在CustomScrollView 和Slivers 中使用WebView，或者这还不支持？

如果我在SliverChildListDelegate 中创建常规小部件（我尝试过Row、Text、Container 等），我可以让滚动应用栏正常工作，但是WebView 却没有运气。

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: const Text("Heading"),
            floating: true,
          ),
          SliverList(
            delegate: SliverChildListDelegate([
              Container(
                child: WebView(
                  initialUrl: url,
                  javascriptMode: JavascriptMode.unrestricted,
                ),
              )
            ]
            ),
          )
        ],
      )
  );
}

欢迎任何指针/建议/RTFM。

编辑赏金

jordan-davies 提供的解决方案有效，但非常不稳定。每当SliverAppBar 滚动离开时，WebView 就会尝试调整自身大小以填充剩余的视口。这会造成非常不稳定/缓慢的体验。

@override
Widget build(BuildContext context) {
  return CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        title: const Text("Heading"),
        floating: true,
      ),
      SliverFillRemaining(
        child: WebView(initialUrl: "http://stackoverflow.com"),
      )
    ],
  );
}

有没有更好的办法？

【问题讨论】：

标签： webview flutter flutter-sliver flutter-appbar

【解决方案1】：

其实我很想发表评论，但是太长了，放不下

我可以给你我的看法，为什么在插件的当前状态下无法做到这一点，默认情况下，Webview 仅在没有其他视图声称该手势时才响应拖动手势。另一方面，像SliverList 这样的滚动条是使SliverAppBar 向上滚动所必需的，默认情况下会消耗所有拖动滚动手势-尽管您可以通过提供 noScrollPhysics 来禁用它-但是一旦WebView 覆盖了所有屏幕，实际上就无法向条子报告以再次开始消耗滚动。

所以解决的办法是修改WebView plugin本身，为拖动手势提供回调，希望flutter团队尽快实现这个功能。

【讨论】：

我在 Github 上打开了官方的错误报告； github.com/flutter/flutter/issues/31243
如果你投票的机会更高，他们会首先解决问题。
@tim done，请在那里查看我的答案，它有部分解决方案

【解决方案2】：

我认为您应该考虑使用SliverFillRemaining 或SliverFillViewport 而不是SliverList。下面是一个使用SliverFillRemaining的示例

https://docs.flutter.io/flutter/widgets/SliverFillRemaining-class.html

@override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          title: const Text("Heading"),
          floating: true,
        ),
        SliverFillRemaining(
          child: WebView(initialUrl: "http://stackoverflow.com"),
        )
      ],
    );
  }

【讨论】：

谢谢。这会呈现 WebView，但 CustomScrollView 似乎正在消耗 AppBar 滚动离开屏幕的点之后的所有滚动事件。我确信当时有一种方法可以将滚动事件委托给 WebView，但我的 flutter-fu 不在上面。现在准备试试 SliverFillViewport。
SilverFillViewport 也不行。 WebView 呈现，但是当您滚动时，WebView 被复制到原始 WebView 边界结束的点之后。我认为，根据文档，一旦您超出初始视口以懒惰地创建更多子项，就会回调 SliverChildBuilderDelegate 。我在屏幕上看到的似乎表明这种情况正在发生。所以我回到了原来的位置。
嗯，可能无法使用WebView。我一直在尝试使用NestedScrollView 而不是CustomScrollView，但无法让它工作。如果你想玩的话，有一个很好的例子here。
你找到解决办法了吗？
我尝试了提供的解决方案，但似乎当应用栏滚动出视图时，webview 会尝试调整大小。这使它成为一种非常不稳定/缓慢的体验。我在这个问题上悬赏。