时间戳

首页 > 解决方案 > WebView CustomScrollView + Floating AppBar

webview - WebView CustomScrollView + Floating AppBar

问题描述

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

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

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

上面代码的gif
有没有更好的办法？

标签： webviewflutterflutter-sliverflutter-appbar

解决方案

我实际上想发表评论，但它太长了，不适合

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

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

推荐阅读