WebView CustomScrollView +浮动AppBar

Question

我正在尝试创建一个屏幕，它有一个WebView (来自颤振：^0.3.5+3)和一个AppBar，我想在用户滚动的屏幕外滚动。

我偶然发现了这个指南，并尝试实现类似的东西，但没有骰子。

是否有一种在带有WebView的CustomScrollView中使用Slivers的方法，还是还不支持这种方法？

如果我在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,
                ),
              )
            ]
            ),
          )
        ],
      )
  );
}

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

编辑赏金

乔丹-戴维斯提供的解决方案是可行的，但非常不稳定。每当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"),
      )
    ],
  );
}

​

有更好的办法吗？

Answer 1

我其实想说点什么，但太长了，不适合

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

因此，解决方案是修改WebView plugin本身，为拖动手势提供回调，希望颤振团队能够很快实现这一特性。

Answer 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"),
        )
      ],
    );
  }

Answer 3

经过多次尝试和错误之后，我找到了一种通过使用gestureRecognizers来解决类似问题的方法，如下所示：

  @override
  Widget build(BuildContext context) {
    return SliverFillRemaining(
      child: WebView(
        initialUrl: url,
        javascriptMode: JavascriptMode.unrestricted,
        gestureRecognizers: {
          Factory<VerticalDragGestureRecognizer>(
            () => VerticalDragGestureRecognizer(),
          ),
        },
      ),
    );
  }