web-dev-qa-db-ja.com

WebView CustomScrollView +フローティングAppBar

WebView（ webview_flutter：^ 0.3.5 + から）と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"),
      )
    ],
  );
}

gif of code above
もっと良い方法はありますか？

webviewflutterflutter-sliverflutter-appbar
8
user3403083

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

実際にコメントしたかったのですが長すぎて

プラグインの現在の状態ではそれができない理由について、私のビューを示します。デフォルトでは、Webviewは、他のビューがそのジェスチャーを要求していない場合にのみドラッグジェスチャーに応答します。一方、SliverListをスクロールアップするために必要なSliverAppBarのようなスクロールスライバーは、デフォルトですべてのドラッグスクロールジェスチャーを消費します-提供することで無効にできますが、 noScrollPhysics-ただし、WebViewがすべての画面をカバーすると、実際にスライバーにレポートして消費スクロールを再開する方法がなくなります。

したがって、解決策はWebView plugin自体がドラッグジェスチャーのコールバックを提供します。フラッターチームがこの機能をすぐに実装することを願っています。

1
Saed Nabil