webview_flutter的webview高度计算

报错：RenderConstrainedBox object was given an infinite size during layout.
如果帮到你，点赞，谢谢。

进入正题：
flutter一个界面内多个组件，如ListView包裹着一个Text和一个webview，此时，必须计算出webview的高度，才可正常显示，否则程序会因webview没给出高度而layout崩溃。

以下为解决方案：
1：使用SizedBox进行包裹webview

Snip20220106_20.png

2：获取webview内html原始宽度和高度，已知屏幕宽度，求出需要的比例高度
公式：

W1/H1 = W2/H2;

求W2宽度
W2 = W1*H2/H1;

求H2高度
H2 = H1*W2/W1;

Snip20220105_17.png Snip20220105_19.png

完整代码：
如有疑问，欢迎留言。
如有更好的计算高度方案，
请告诉楼主，共同进步

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:jd_shop/core/models/home/w_y_home_model.dart';
import 'package:jd_shop/utils/network/wy_network.dart';
import 'package:jd_shop/utils/network/wy_network_const.dart';
import 'package:jd_shop/utils/screen_size/wy_screen_size.dart';
import 'package:jd_shop/utils/wy_log/wylog.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WYHomeDetailsHistoryView extends StatefulWidget {

  final List1 model;

  const WYHomeDetailsHistoryView(this.model,{Key? key}) : super(key: key);

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

class _WYHomeDetailsHistoryViewState extends State<WYHomeDetailsHistoryView> with AutomaticKeepAliveClientMixin {

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
  String _webViewUrl = "";

  final double _webWidth = WYSizeFit.screenWidth!;// webview 已知屏幕宽度
  double _webHeight = 100;// 求 webview高度
  double? _originalWidth;//原宽度
  double? _originalHeight;//原高度

  WebViewController? _webController;

  @override
  void initState() {
    super.initState();

    Map<String,dynamic> params = {
      "ProductID" : widget.model.productID,
      "devtype" : "3",
    };
    WYHttpRequest.request(WYNetWorkUrl.GetDetailByProID,params: params,loadingStr: "加载中...").then((value){
      setState(() {
        _webViewUrl = value["Data"]["info"]["Bewrite"];
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);

    if(_webViewUrl.isEmpty){
      return Text("");
    }

    return ListView(
      shrinkWrap: true,
      children: [
        Container(
          child: Text("我是顶部文字"),
          color: Colors.orange,
          width: double.infinity,
          height: 100,
        ),
        buildWebView(),
      ],
    );
  }

  Widget buildWebView() {
    return SizedBox(
      width: _webWidth,
      height: _webHeight,
      child: WebView(
        zoomEnabled: true,
        initialUrl: _webViewUrl,
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (controller) {
          _webController = controller;
          controller.loadUrl(Uri.dataFromString(_webViewUrl,
              mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
              .toString());
        },
        onPageFinished: (url) async {
          ///获取webView原始高度
          var originalHeight = await _webController!.runJavascriptReturningResult("document.documentElement.clientHeight;");
          _originalHeight = double.parse(originalHeight);

          ///获取webView原始宽度
          var originalWidth = await _webController!.runJavascriptReturningResult("document.documentElement.clientWidth;");
          _originalWidth = double.parse(originalWidth);

          ///计算等比例 图片高度
          /// W1/H1 = W2/H2;
          /// H2 = H1 * W2 / W1;
          setState(() {
            _webHeight = _originalHeight! * _webWidth / _originalWidth!;
          });

        },
      ),
    );
  }

  @override
  void dispose() {
    //为了避免内存泄露，需要调用
    super.dispose();
  }

}