WebView 到 SizedBox Flutter

Question

我想在 flutter 中将自定义 webview 添加到 sizedBox ......我已经尝试过这样做，但有一个错误：

代码：

@override
   Widget build(BuildContext context) {   
    SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
    return new Scaffold(
      key: _scaffoldKey,
         floatingActionButton: new Row(
        mainAxisSize: MainAxisSize.min,
            children: <Widget>[
                new GestureDetector(
                  child: new Image.network("http://modernworfare.altervista.org/pause.png", width: 80.0,),
                  onTap: (){stop(); _showSnackBar();}, 
                ),
                new GestureDetector(
                  child: new Image.network("http://modernworfare.altervista.org/bg.png",width: 80.0,),
                  onTap: (){play(); _showSnackBar2();},
                ),
              ],
         ),
      backgroundColor: Colors.black,
      body: new ListView(
        children: <Widget>[
        new Column(
        children: <Widget>[
          new Image.network("https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-9/16864236_1836092593321492_1828236030296093399_n.jpg?_nc_cat=0&oh=817190c0ef6ac6e3076582905997f3e9&oe=5B81BFF9"),
          new Divider(),
          new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new Container(
              padding: new EdgeInsets.all(8.0),
              child: new Text("  WEBSITE  ", style: new TextStyle(color: Colors.white,)),
              decoration: new BoxDecoration(
                borderRadius: new BorderRadius.circular(10.0),
                border: new Border.all(
                  width: 4.0,
                  color: Colors.white,
                  ),
                ),
              ),
              new Container(
              padding: new EdgeInsets.all(8.0),
              child: new Text("  SOCIAL  ", style: new TextStyle(color: Colors.white,)),
              decoration: new BoxDecoration(
                borderRadius: new BorderRadius.circular(10.0),
                border: new Border.all(
                  width: 4.0,
                  color: Colors.white,
                  ),
                ),
              ),
              new Container(
              padding: new EdgeInsets.all(8.0),
              child: new Text("  SHOP  ", style: new TextStyle(color: Colors.white,)),
              decoration: new BoxDecoration(
               borderRadius: new BorderRadius.circular(10.0),
                border: new Border.all(
                  width: 4.0,
                  color: Colors.white,
                  ),
                ),
              ),
              new Container(
              padding: new EdgeInsets.all(8.0),
              child: new Text("  CONTACT  ", style: new TextStyle(color: Colors.white,)),
              decoration: new BoxDecoration(
               borderRadius: new BorderRadius.circular(10.0),
                border: new Border.all(
                  width: 4.0,
                  color: Colors.white,
                  ),
                ),
              )],
          ),
          new Text("hi",style: new TextStyle(color: Colors.white), ), 
          new SizedBox(
            height: 50.0,
            width: 600.0,
            child: webview.launch("url",
            )
          ),  
          ],
        )],
      ),
    );
  }

错误：

不能将参数类型“未来”分配给参数类型“小部件”。

任何建议或想法？有可能这样做吗？也许添加一个未来的建设者或类似的东西？

Answer 1

问题： Webview 没有为您提供计算其高度的全高，您需要在页面完成时找到总内容高度。

这是我从这里找到的解决方案

StreamBuilder<double>(
          initialData: 100,
          stream: streamController.stream,
          builder: (context, snapshot) {
            return Container(
              height: snapshot.data,
              child: WebView(
                initialUrl:
                    'data:text/html;base64,${base64Encode(const Utf8Encoder().convert(contentText))}',
                onPageFinished: (some) async {
                  double height = double.parse(
                      await _webViewController.evaluateJavascript(
                          "document.documentElement.scrollHeight;"));
                  streamController.add(height);

                },
                onWebViewCreated: (_controller) {
                  _webViewController = _controller;
                },
                javascriptMode: JavascriptMode.unrestricted,
              ),
            );
          }
        );

注意：我在这里使用了 streambuilder 来避免在构建小部件时不必要的“设置状态”。

请让我知道此解决方案是否有效。

Answer 2

您使用哪个 webview 插件？假设flutter_webview_plugin，请注意警告The webview is not integrated in the widget tree, it is a native view on top of the flutter view.。

launch()不返回Widget; 它返回Future<Null>，因此即使您等待 Future 完成，您也不会获得 Widget。这是需要注意的一点：webview（视觉上）位于 Flutter 应用程序之上 - 它不是 Flutter Widget。

您可以使用以下命令来定位此浮动网络视图并调整其大小

flutterWebviewPlugin.launch(url,
              fullScreen: false,
              rect: new Rect.fromLTWH(
                  0.0, 
                  0.0, 
                  MediaQuery.of(context).size.width, 
                  300.0));

如果你能计算出它的绝对位置。

使用此方法，您可以找到小部件的左上角，您可以在其上放置网络视图：

  @override
  Widget build(BuildContext context) {
    RenderObject ro = context.findRenderObject();
    if (ro is RenderBox) {
      print(ro.localToGlobal(new Offset(0.0, 0.0)));
    }