flutter_webview不垂直滚动（不显示溢出的滚动条）

发布于 2025-01-29 18:38:24 字数 2081 浏览 0 评论 0原文

I'm trying to embed a specific webpage (https://bandcamp.com/EmbeddedPlayer/album=3538525485/size=large/bgcol=ffffff/linkcol=9c7b14/transparent=true/) in Flutter app, but the page is not scrollable for overflown内容。

以下是应显示的方式，请注意可滚动播放列表（Macos Safari响应设计模式的屏幕截图）。

但是在Flutter WebView中，目前显示如下（iOS模拟器的屏幕截图）：

请注意，尽管内容溢出，但没有scrollbar却无法滚动滚动。

这里的代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      theme: CupertinoThemeData(
        brightness: Brightness.light,
      ),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('Home'),
      ),
      child: SafeArea(
        child: WebView(
          initialUrl: 'https://bandcamp.com/EmbeddedPlayer/album=3538525485/size=large/bgcol=ffffff/linkcol=9c7b14/transparent=true/',
          javascriptMode: JavascriptMode.unrestricted,
          zoomEnabled: false,
          gestureRecognizers: {}..add(Factory(() => VerticalDragGestureRecognizer())),
        ),
      ),
    );
  }
}

任何帮助都非常感谢。

原文

Following is the how it should be shown, notice the scrollable playlist (Screenshot from macOS Safari responsive design mode).

But in Flutter WebView, currently it is showing as below (Screenshot of iOS simulator):

Notice, although there is content overflowing, but no scrollbar and not able to scroll.

Here's code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      theme: CupertinoThemeData(
        brightness: Brightness.light,
      ),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('Home'),
      ),
      child: SafeArea(
        child: WebView(
          initialUrl: 'https://bandcamp.com/EmbeddedPlayer/album=3538525485/size=large/bgcol=ffffff/linkcol=9c7b14/transparent=true/',
          javascriptMode: JavascriptMode.unrestricted,
          zoomEnabled: false,
          gestureRecognizers: {}..add(Factory(() => VerticalDragGestureRecognizer())),
        ),
      ),
    );
  }
}

Any help is much appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

唯憾梦倾城 2025-02-05 18:38:24

事实证明，我不得不将带camp播放器嵌入iframe。
在基于layoutbuilder的约束中应用了一些CSS之后，嵌入式播放器的响应布局的约束之后，现在一切都按预期工作了。

这是最终代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      theme: CupertinoThemeData(
        brightness: Brightness.light,
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int _visibleChildIndex = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text(
          'WebView Page',
          overflow: TextOverflow.ellipsis,
        ),
      ),
      child: SafeArea(
        child: IndexedStack(
          index: _visibleChildIndex,
          children: [
            const Center(
              child: CircularProgressIndicator.adaptive(),
            ),
            Center(
              child: Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: const [
                  Icon(
                    Icons.warning_amber_rounded,
                    size: 64.0,
                  ),
                  SizedBox(height: 8.0),
                  Text(
                    'Failed to load page.',
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            ),
            _buildWebView(
                'https://bandcamp.com/EmbeddedPlayer/album=3538525485/size=large/bgcol=ffffff/linkcol=9c7b14/transparent=true/'),
          ],
        ),
      ),
    );
  }

  String _getBandCampPlayerHTML({
    required String iframeSrc,
    required double width,
    required double height,
  }) {
    return '''
    <!DOCTYPE html>
    <html>
      <head>
        <title>Music Album</title>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <style>
          html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
          }
          .page-container {
            max-width: ${width}px;
            margin: 0 auto;
          }
          .iframe-container {
            width: 0;
            height: 0;
            position: relative;
            padding: ${height}px 0 0 ${width}px;
          }
          iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
          }
        </style>
      </head>
      <body>
      <div class="page-container">
        <div class="iframe-container">
          <iframe src="$iframeSrc" scrolling="no" allow="encrypted-media;"></iframe>
        </div>
      </div>
      </body>
    </html> 
    ''';
  }

  Widget _buildWebView(String src) {
    return LayoutBuilder(builder: (context, constraints) {
      double width = 700.0;
      final height = constraints.maxHeight;
      width = (constraints.maxWidth > width) ? width : constraints.maxWidth;
      if (height <= width) {
        width = height * 0.6;
      }
      return WebView(
        initialUrl: Uri.dataFromString(
          _getBandCampPlayerHTML(
            iframeSrc: src,
            width: width,
            height: height,
          ),
          mimeType: 'text/html',
        ).toString(),
        javascriptMode: JavascriptMode.unrestricted,
        allowsInlineMediaPlayback: true,
        onWebResourceError: (error) {
          setState(() {
            _visibleChildIndex = 1;
          });
        },
        onPageFinished: (url) {
          setState(() {
            _visibleChildIndex = 2;
          });
        },
      );
    });
  }
}

Turns out, I had to embed the Bandcamp player in an iframe.
After applying some CSS based on LayoutBuilder constraints for responsive layout of embedded player, now everything is working as expected.

Here's final code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      theme: CupertinoThemeData(
        brightness: Brightness.light,
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int _visibleChildIndex = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text(
          'WebView Page',
          overflow: TextOverflow.ellipsis,
        ),
      ),
      child: SafeArea(
        child: IndexedStack(
          index: _visibleChildIndex,
          children: [
            const Center(
              child: CircularProgressIndicator.adaptive(),
            ),
            Center(
              child: Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: const [
                  Icon(
                    Icons.warning_amber_rounded,
                    size: 64.0,
                  ),
                  SizedBox(height: 8.0),
                  Text(
                    'Failed to load page.',
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            ),
            _buildWebView(
                'https://bandcamp.com/EmbeddedPlayer/album=3538525485/size=large/bgcol=ffffff/linkcol=9c7b14/transparent=true/'),
          ],
        ),
      ),
    );
  }

  String _getBandCampPlayerHTML({
    required String iframeSrc,
    required double width,
    required double height,
  }) {
    return '''
    <!DOCTYPE html>
    <html>
      <head>
        <title>Music Album</title>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <style>
          html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
          }
          .page-container {
            max-width: ${width}px;
            margin: 0 auto;
          }
          .iframe-container {
            width: 0;
            height: 0;
            position: relative;
            padding: ${height}px 0 0 ${width}px;
          }
          iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
          }
        </style>
      </head>
      <body>
      <div class="page-container">
        <div class="iframe-container">
          <iframe src="$iframeSrc" scrolling="no" allow="encrypted-media;"></iframe>
        </div>
      </div>
      </body>
    </html> 
    ''';
  }

  Widget _buildWebView(String src) {
    return LayoutBuilder(builder: (context, constraints) {
      double width = 700.0;
      final height = constraints.maxHeight;
      width = (constraints.maxWidth > width) ? width : constraints.maxWidth;
      if (height <= width) {
        width = height * 0.6;
      }
      return WebView(
        initialUrl: Uri.dataFromString(
          _getBandCampPlayerHTML(
            iframeSrc: src,
            width: width,
            height: height,
          ),
          mimeType: 'text/html',
        ).toString(),
        javascriptMode: JavascriptMode.unrestricted,
        allowsInlineMediaPlayback: true,
        onWebResourceError: (error) {
          setState(() {
            _visibleChildIndex = 1;
          });
        },
        onPageFinished: (url) {
          setState(() {
            _visibleChildIndex = 2;
          });
        },
      );
    });
  }
}

回复收藏 0 原文

~没有更多了~