HarmonyOS 鸿蒙Next 使用webview_flutter内容过高会显示异常

ionicwang 1楼•22 天前

通过描述定位不到具体问题，请提供复现问题的简化代码。

sinazl 2楼•22 天前

好哥哥，解决了吗

zlyuanteng 3楼•22 天前

gougou168 4楼•22 天前

测试代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .textStyle {
          height: 50px; /* 设置固定高度 */
          overflow: auto; /* 当内容超出高度时显示滚动条 */
          text-align: center;
          font-size: 30px;
        }
    </style>
</head>
<body>
<script>
    var index = {index};
</script>
<script>
    for (var i = 1; i <= index; i++) {
        document.write("<div class=\"textStyle\">这是第" + i + "次循环</div>");
    }
</script>
</body>
</html>

flutter

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute<void>(
                    builder: (BuildContext context) =>
                        const MyHomePageOne(title:"正常", index: 46,),
                  ),
                );
              },
              child: const Text(
                "正常",
                style: TextStyle(
                    fontSize: 20,
                    color: Colors.white
                ),
              ),
            ),

            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute<void>(
                    builder: (BuildContext context) =>
                        const MyHomePageOne(title: "异常", index: 47,),
                  ),
                );
              },
              child: const Text(
                "异常",
                style: TextStyle(
                    fontSize: 20,
                    color: Colors.white
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class MyHomePageOne extends StatefulWidget {
  const MyHomePageOne({super.key, required this.title, required this.index});
  final String title;
  final int index;
  @override
  State<MyHomePageOne> createState() => _MyHomePageOneState();
}
class _MyHomePageOneState extends State<MyHomePageOne> {
  final WebViewController _webViewController = WebViewController();
  String _htmlString = "";
  double _webHeight = 300.0; // 为0不会加载
  @override
  void initState() {
    super.initState();
    _initWebViewController();
    _loadHtml();
  }
  void _loadHtml() async {
    try {
      var htmlString = await DefaultAssetBundle.of(context).loadString("assets/test.html");
      if (htmlString.isNotEmpty) {
        debugPrint("加载成功");
      } else {
        debugPrint("加载失败");
      }
      _htmlString = htmlString.replaceAll("{index}", "${widget.index}");
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
        debugPrint("addPostFrameCallback: $timeStamp");
        _webViewController.loadHtmlString(_htmlString);
      });
    } catch (e) {
      debugPrint("load error ${e.toString()}");
    }
  }

  void _initWebViewController() async {
    _webViewController
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(Colors.transparent)
      ..setNavigationDelegate(
        NavigationDelegate(onPageFinished: (url) async {
          _webViewController.runJavaScriptReturningResult("document.readyState")
              .then((value) async {
            var value = await _webViewController.runJavaScriptReturningResult(
                'document.documentElement.scrollHeight');
            debugPrint("Get documentElement Height: ${value.toString()}");
            var jsHeight = double.parse(value.toString());
            setState(() {
              _webHeight = jsHeight;
            });
          });
        })
      );
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: ListView(
          children: [
            Container(
              width: double.infinity,
              height: 50,
              alignment: Alignment.center,
              color: Colors.amber,
              child: const Text(
                "头部",
                style: TextStyle(
                    fontSize: 20,
                    color: Colors.white
                ),
              ),
            ),
            SizedBox(
              width: double.infinity,
              height: _webHeight,
              child: WebViewWidget(controller: _webViewController),
            ),
            Container(
              width: double.infinity,
              height: 50,
              alignment: Alignment.center,
              color: Colors.blueAccent,
              child: const Text(
                "尾部",
                style: TextStyle(
                    fontSize: 20,
                    color: Colors.white
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

h691938207 5楼•22 天前

您好，能提供下相关demo代码和现象截图吗

h691938207 6楼•22 天前

提供了

nodeper 7楼•22 天前

在HarmonyOS 鸿蒙Next平台上使用webview_flutter时，如果遇到内容显示异常的问题，特别是内容过高导致显示不全或布局错乱，这通常与WebView的容器尺寸设置、滚动处理或渲染机制有关。以下是一些可能的解决方向：

确保容器尺寸正确：检查WebView的父容器是否有正确设置尺寸，确保它没有溢出或被限制在不适当的空间内。
启用滚动：确保WebView的滚动功能已启用，以允许用户滚动查看超出屏幕范围的内容。
优化WebView配置：检查webview_flutter的配置，确保已根据鸿蒙系统的特性进行优化，如调整布局模式、渲染策略等。
版本兼容性：确认webview_flutter插件的版本与HarmonyOS鸿蒙Next的版本兼容，有时版本不匹配也会导致显示问题。
调试与日志：使用鸿蒙系统的开发者工具进行调试，查看WebView的加载日志和渲染过程，寻找可能的错误或警告信息。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。这样可以获得更专业的技术支持和解决方案。