Flutter webView自适应高度
时间: 2023-07-22 08:12:32 浏览: 424
要让Flutter WebView组件自适应高度,可以使用IntrinsicHeight和LayoutBuilder组件来实现。具体实现步骤如下:
1. 在WebView外面包裹一个IntrinsicHeight组件,让WebView的高度自适应它的子组件的最大高度。
2. 在WebView内部使用LayoutBuilder组件,获取WebView的实际高度,并将实际高度保存在一个变量中。
3. 将WebView的高度设置为保存的实际高度,这样WebView的高度就能够自适应了。
下面是一个示例代码:
```dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class MyWebView extends StatefulWidget {
final String url;
const MyWebView({Key key, this.url}) : super(key: key);
@override
_MyWebViewState createState() => _MyWebViewState();
}
class _MyWebViewState extends State<MyWebView> {
double _webViewHeight;
@override
void initState() {
super.initState();
_webViewHeight = 1.0;
}
@override
Widget build(BuildContext context) {
return IntrinsicHeight(
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return WebView(
initialUrl: widget.url,
javascriptMode: JavascriptMode.unrestricted,
onPageFinished: (String url) {
setState(() {
_webViewHeight = double.parse(
"document.documentElement.scrollHeight.toString()");
});
},
gestureNavigationEnabled: true,
navigationDelegate: (NavigationRequest request) {
return NavigationDecision.navigate;
},
onWebResourceError: (err) {
print(err);
},
javascriptChannels: <JavascriptChannel>[
JavascriptChannel(
name: 'Print',
onMessageReceived: (JavascriptMessage message) {
print(message.message);
}),
].toSet(),
);
},
),
);
}
}
```
在这个示例代码中,我们使用了IntrinsicHeight和LayoutBuilder组件来实现WebView的自适应高度。在布局中,我们首先将WebView包裹在一个IntrinsicHeight组件中,然后在WebView内部使用LayoutBuilder组件获取WebView的高度,并在页面加载完成后更新WebView的高度。这样,WebView就可以自适应高度了。
阅读全文