Question

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

我偶然发现了这个guide，并尝试实现类似但没有骰子的方法。
是否可以通过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,
                ),
              )
            ]
            ),
          )
        ],
      )
  );
}

欢迎使用任何指针/建议/ 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"),
      )
    ],
  );
}

有更好的方法吗？

Answer 1

我认为您应该看看使用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 2

我实际上想发表评论，但是太长了，无法容纳

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

因此解决方案是修改WebView plugin本身以提供拖动手势的回调，希望扑扑团队能够尽快实现此功能。

WebView CustomScrollView +浮动AppBar

2 个答案: