当前位置:   article > 正文

Flutter获取webview的高度_webview 获取状态栏高度

webview 获取状态栏高度

1、官方插件webview_flutter

核心是在 onPageFinished 方法中 用js获取高度:

var originalHeight = await _webController.runJavascriptReturningResult("document.body.offsetHeight;");

注意:也有人说用这个 

var originalHeight = await _webController!.runJavascriptReturningResult("document.documentElement.clientHeight;");

但是这个我在尝试的时候获取到的永远是你设定的初始值,而不是网页的真实高度,

还有一个js 语句"document.body.scrollHeight",具体结果请自行尝试。

参考:webview_flutter的webview高度计算

webview加载网页获取高度

代码如下:

  1. double _webHeight = 500; //去计算得到网页的高度,然后设置高度
  2. double _webWidth;// 已知屏幕宽度
  3. double _originalHeight;//原高度
  4. @override
  5. void initState() {
  6. super.initState();
  7. if (Platform.isAndroid) {
  8. WebView.platform = SurfaceAndroidWebView();
  9. }
  10. _webWidth = ScreenUtil().screenWidth;
  11. ........
  12. }
  13. @override
  14. Widget build(BuildContext context) {
  15. return Scaffold(
  16. backgroundColor: Colors.white,
  17. resizeToAvoidBottomInset: false,
  18. appBar: AppBar(
  19. elevation: 0,
  20. leading: appBarLeading(context),
  21. ),
  22. body: EmptyContainer(
  23. type: _emptyType,
  24. child: Stack(
  25. children: [
  26. Column(
  27. mainAxisSize: MainAxisSize.max,
  28. children: [
  29. Expanded(
  30. child: SmartRefresher(
  31. enablePullDown: false,
  32. enablePullUp: _commentList.length == 0 ? false : true,
  33. footer: appCustomFooter(),
  34. controller: _refreshController,
  35. onLoading: _loadCommentList,
  36. child: CustomScrollView(
  37. slivers: [
  38. _renderContent(),// 内容
  39. _renderComment(),// 评论列表
  40. _renderCommentEmpty()// 默认评论展示
  41. ]
  42. ),
  43. ),
  44. ),
  45. Container(
  46. height: 40 + ScreenUtil().statusBarHeight,
  47. )
  48. ],
  49. ),
  50. _renderCommenInput() //评论输入框
  51. ],
  52. ),
  53. ),
  54. );
  55. }
  56. _renderContent() {
  57. return SliverToBoxAdapter(
  58. child: Container(
  59. padding: EdgeInsets.only(bottom: 15, top: 5),
  60. child: Column(
  61. mainAxisAlignment: MainAxisAlignment.start,
  62. mainAxisSize: MainAxisSize.min,
  63. crossAxisAlignment: CrossAxisAlignment.start,
  64. children: [
  65. Container(
  66. padding: EdgeInsets.only(left: 10, right: 10),
  67. child: Column(
  68. mainAxisAlignment: MainAxisAlignment.start,
  69. crossAxisAlignment: CrossAxisAlignment.start,
  70. children: [
  71. Text(
  72. Strings.autoLineString(_model?.title.toString() ?? ""),
  73. style: TextFont.columnTextBold(20, ColorTool.hex333),
  74. maxLines: 2),
  75. Padding(padding: EdgeInsets.only(top: 5)),
  76. Text(
  77. "文章分类:${_model?.catName ?? ""}
  78. ${_model?.views_num ?? "1"}人浏览",
  79. style: TextFont.medium(10, ColorTool.hex333)),
  80. ],
  81. ),
  82. ),
  83. Padding(padding: EdgeInsets.only(top: 16)),
  84. // HtmlWidget(_model?.content ?? "",
  85. // customWidgetBuilder: (e){
  86. // switch(e.localName){
  87. // case 'p':
  88. // return {
  89. // "width":"20"
  90. // };
  91. // }
  92. // return null;
  93. // },
  94. // ),
  95. Container(
  96. height: _webHeight,
  97. width: _webWidth,
  98. child: WebView(
  99. // gestureRecognizers: [Factory(() => EagerGestureRecognizer())].toSet(),
  100. javascriptMode: JavascriptMode.unrestricted,
  101. onWebViewCreated: (WebViewController webViewController) {
  102. _controller.complete(webViewController);
  103. _webController = webViewController;
  104. _webController.loadUrl(_webUrl);
  105. },
  106. javascriptChannels: <JavascriptChannel>{
  107. // _toasterJavascriptChannel(context),
  108. },
  109. onPageStarted: (String url) {
  110. print('Page started loading: $url');
  111. },
  112. onProgress: (int progress) {
  113. print("WebView is loading (progress : $progress%)");
  114. },
  115. onPageFinished: (String url) async {
  116. //获取webView原始高度
  117. var originalHeight = await _webController.runJavascriptReturningResult("document.body.offsetHeight;");
  118. _originalHeight = double.parse(originalHeight);
  119. setState(() {
  120. _webHeight = _originalHeight <= 0 ? 300 : _originalHeight;
  121. });
  122. print('网页高度-----' + _originalHeight.toString());
  123. },
  124. gestureNavigationEnabled: true,
  125. backgroundColor: const Color(0x00000000),
  126. ),
  127. ),
  128. ],
  129. ),
  130. ),
  131. );
  132. }
  133. .........................
  134. .........................

2、使用 InAppWebView

  flutter_inappwebview: ^5.3.2

在loadStop中调用

  1. int contentHeight = await _controller.getContentHeight();
  2. double zoomScale = await _controller.getZoomScale();
  3. double htmlHeight = contentHeight.toDouble() * zoomScale;
  4. double htmlHeightFixed = double.parse(htmlHeight.toStringAsFixed(2));
  5. if (htmlHeightFixed == 0.0) {
  6. return;
  7. }
  8. setState(() {
  9. _htmlHeight = htmlHeightFixed + 0.1;
  10. });

 参考:Flutter and InAppWebView How to get height? - Stack Overflow

 InappWebView 使用方法请自行查找pub例子

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/268764
推荐阅读
相关标签
  

闽ICP备14008679号