我想将一个自定义的webview添加到一个大小的Box中... ...我试过这样做,但是有一个错误:
代码:
@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",
)
),
],
)],
),
);
}
错误:
参数类型'Future'不能分配给参数类型'Widget'。
任何建议或想法? 有可能吗? 也许添加一个未来的建设者或类似的东西? 再见
答案 0 :(得分:4)
问题: Webview没有为您提供完整的高度来计算其高度,您需要在页面结束时找到总内容高度。
这是我从here找到的解决方案
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来避免在构建小部件时不必要的“ setstate”。
请让我知道此解决方案是否有效。
答案 1 :(得分:1)
这里是webview_flutter_plus的webview_flutter扩展,它允许获取Web内容的高度,即使您在列表视图中也可以使用它,这也有助于从资产或字符串中加载HTML,CSS和Javascript内容。这会继承API稍有更改的webview_flutter的所有功能。
答案 2 :(得分:0)
您使用的是哪个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));
如果你能算出它的绝对位置。
使用此method,您可以找到小工具的左上角,您可以在其上定位您的网页视图:
@override
Widget build(BuildContext context) {
RenderObject ro = context.findRenderObject();
if (ro is RenderBox) {
print(ro.localToGlobal(new Offset(0.0, 0.0)));
}
答案 3 :(得分:0)
尚不支持内联WebView(窗口小部件树中的WebView窗口小部件)。据我所知,在Flutter回购中,很快就没有简单的解决方案了。如果您只想显示富文本或html文档,则会有一个名为RichText的正式小部件或一些与{h}相关联的packages。
答案 4 :(得分:0)
您可以使用我的插件flutter_inappwebview,该插件可让您通过InAppWebView
小工具等添加内联Web视图。
因此,您可以在代码中添加InAppWebView
小部件,如下所示:
@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: InAppWebView(
initialUrl: "https://flutter.dev",
initialHeaders: {},
initialOptions: InAppWebViewWidgetOptions(
inAppWebViewOptions: InAppWebViewOptions(
debuggingEnabled: true,
),
),
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {
},
onLoadStop: (InAppWebViewController controller, String url) {
},
)
),
],
)],
),
);
}
答案 5 :(得分:0)
您可以使用flutter_webview_plugin 0.3.10
它具有一个非常易于使用的小部件,以下是供您参考的代码:
new WebviewScaffold(
url: selectedUrl,
appBar: new AppBar(
title: const Text('Widget webview'),
),
withZoom: true,
withLocalStorage: true,
hidden: true,
initialChild: Container(
color: Colors.redAccent,
child: const Center(
child: Text('Waiting.....'),
),
),
),