flutter - 防止 Flutter WebView 溢出水平滚动轮播？

Question

我正在使用 Flutter 中的Perspectives Pageview库来实现水平轮播。当我只是Containers用图像或文本等进行常规渲染时，一切正常。

但是，当我嵌入 WebView 时，它会溢出其父容器，并在移动 Widget 时调整大小：

我不确定是什么原因造成的，以及如何修复它，以便它像其他元素一样留在父元素中。

我的代码：

Container(
      child: Center(
        // Adding Child Widget of Perspective PageView
        child: PerspectivePageView(
          hasShadow: true, // Enable-Disable Shadow
          shadowColor: Colors.black12,
          children: <Widget>[
            Container(
                child: Column(
                  children: [
                    Expanded(
                      child: Container(
                        color: Colors.black54,
                        child: Container(
                            color: Colors.white,
                            child: Column(
                              children: [
                                Expanded(
                                  child: WebViewPlus(
                                    onWebViewCreated: (controller) {
                                      this._controller = controller;
                                      controller
                                          .loadString(_htmlForCardsList[0]);
                                    },
                                    javascriptMode: JavascriptMode.unrestricted,
                                  ),
                                )
                              ],
                            )),
                        padding: EdgeInsets.all(2),
                      ),
                    ),
                    Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "View Next",
                            style: TextStyle(
                                fontSize: 24.0,
                                fontWeight: FontWeight.w400,
                                color: Colors.orange),
                          ),
                        ],
                      ),
                      height: 60,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border(
                          top: BorderSide(color: Colors.black54, width: .3),
                          bottom: BorderSide(color: Colors.black54, width: 1.5),
                          left: BorderSide(color: Colors.black54, width: 1.5),
                          right: BorderSide(color: Colors.black54, width: 1.5),
                        ),
                      ),
                    ),
                  ],
                ),
                color: Colors.orange)])))

我也尝试Expanded过WebView用

Container(
          width: 300,
          height: 200,
          child: WebViewPlus(
          ...

我遇到了同样的问题。水平滚动轮播后，WebView 的大小会发生变化，这与轮播中包含的其他内容不同。

非常感谢您的任何见解。

标签： flutterdartmobileflutter-dependenciesflutter-ios

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用包https://pub.dev/packages/flutter_inappwebview
代码片段

Expanded(
      child: InAppWebView(
        initialUrl: url,
        initialHeaders: {},
        initialOptions: InAppWebViewGroupOptions(
          crossPlatform: InAppWebViewOptions(
            debuggingEnabled: true,
          ),
        ),
        onWebViewCreated:
            (InAppWebViewController controller) {
          webView = controller;
          print("onWebViewCreated");
          webView.loadData(
              data: _htmlForCardsList[0]);
        },

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:perspective_pageview/perspective_pageview.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  InAppWebViewController webView;
  String url = "about:blank";
  double progress = 0;
  bool status = false;

  @override
  dispose() {
    webView.stopLoading();
    super.dispose();
  }

  List<String> _htmlForCardsList = [
    '''<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>'''
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
          child: Center(
              // Adding Child Widget of Perspective PageView
              child: PerspectivePageView(
                  hasShadow: true, // Enable-Disable Shadow
                  shadowColor: Colors.black12,
                  children: <Widget>[
            Container(
                child: Column(
                  children: [
                    Expanded(
                      child: Container(
                        color: Colors.black54,
                        child: Container(
                            color: Colors.white,
                            child: Column(
                              children: [
                                Expanded(
                                  child: InAppWebView(
                                    initialUrl: url,
                                    initialHeaders: {},
                                    initialOptions: InAppWebViewGroupOptions(
                                      crossPlatform: InAppWebViewOptions(
                                        debuggingEnabled: true,
                                      ),
                                    ),
                                    onWebViewCreated:
                                        (InAppWebViewController controller) {
                                      webView = controller;
                                      print("onWebViewCreated");
                                      webView.loadData(
                                          data: _htmlForCardsList[0]);
                                    },
                                    onLoadStart:
                                        (InAppWebViewController controller,
                                            String url) {
                                      print("start $status");
                                      status = false;
                                    },
                                    onLoadStop:
                                        (InAppWebViewController controller,
                                            String url) {
                                      print("stop $status");
                                      status = true;
                                    },
                                    onProgressChanged:
                                        (InAppWebViewController controller,
                                            int progress) {
                                      this.progress = progress / 100;
                                    },
                                  ),
                                )
                              ],
                            )),
                        padding: EdgeInsets.all(2),
                      ),
                    ),
                    Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "View Next",
                            style: TextStyle(
                                fontSize: 24.0,
                                fontWeight: FontWeight.w400,
                                color: Colors.orange),
                          ),
                        ],
                      ),
                      height: 60,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border(
                          top: BorderSide(color: Colors.black54, width: .3),
                          bottom: BorderSide(color: Colors.black54, width: 1.5),
                          left: BorderSide(color: Colors.black54, width: 1.5),
                          right: BorderSide(color: Colors.black54, width: 1.5),
                        ),
                      ),
                    ),
                  ],
                ),
                color: Colors.orange)
          ]))),
    );
  }
}