dart - 使用 flutter_html_view 插件时如何修复 flutter 中的这个错误

Question

我正在制作一个应用程序，我想在其中使用 flutter_html_view 插件(LInK)在 flutter 中查看 html 页面我得到了一个错误，这里是错误消息的屏幕截图 Error message screenshot这是 html HTML 的屏幕截图这是 flutter 代码

    import 'package:flutter/material.dart';
    import 'package:flutter_html_view/flutter_html_view.dart';
    class unit extends StatelessWidget {

    unit();
    @override
    Widget build(BuildContext context) {
    String html = "<h3>Physical Quantities</h3> <p>Physical quantities may be divided in two classes:</p> <p>1. Scalar Quantities</p> <p>2. Vector Quantities</p> <p>-A scalar quantity is one which has only magnitude.</p> <p>-A vector quantity has both magnitude and direction.</p> <p>-Force, Velocity, Momentum, Acceleration are examples of vector quantities.</p> <p>-Mass, length, time, volume, speed, energy, work are examples of scalar quantities.</p> <p> </p> <h3>Units</h3> <p><br />-All measurements in physics require standard units.</p> <p>-In 1960, the General Conference of Weights and Measures recommended that a metric system of measurements called the International System of Units, abbreviated as SI units, be used.</p> <p> </p> <h3>Some Important Units</h3> <table style="height: 379px; width: 319px; border-color: #766B69;"> <tbody> <tr style="height: 17px;"> <td style="width: 59.2px; height: 17px;">S. No.</td> <td style="width: 84px; height: 17px;">Units</td> <td style="width: 155.2px; height: 17px;">Quantity</td> </tr> <tr style="height: 17px;"> <td style="width: 59.2px; height: 17px;">1.</td> <td style="width: 84px; height: 17px;">Metre</td> <td style="width: 155.2px; height: 17px;">Length</td> </tr> <tr style="height: 17px;"> <td style="width: 59.2px; height: 17px;">2.</td> <td style="width: 84px; height: 17px;">Kilogram</td> <td style="width: 155.2px; height: 17px;">Mass</td> </tr> <tr style="height: 17px;"> <td style="width: 59.2px; height: 17px;">3.</td> <td style="width: 84px; height: 17px;">Second</td> <td style="width: 155.2px; height: 17px;">Time</td> </tr> <tr style="height: 17px;"> <td style="width: 59.2px; height: 17px;">4.</td> <td style="width: 84px; height: 17px;">Ampere</td> <td style="width: 155.2px; height: 17px;">Electric current</td> </tr> <tr style="height: 17px;"> <td style="width: 59.2px; height: 17px;">5.</td> <td style="width: 84px; height: 17px;">Candela</td> <td style="width: 155.2px; height: 17px;">Luminous intensity</td> </tr> <tr style="height: 17px;"> <td style="width: 59.2px; height: 17px;">6.</td> <td style="width: 84px; height: 17px;">Newton</td> <td style="width: 155.2px; height: 17px;">Force</td> </tr> <tr style="height: 17px;"> <td style="width: 59.2px; height: 17px;">7.</td> <td style="width: 84px; height: 17px;">Joule</td> <td style="width: 155.2px; height: 17px;">Workdone</td> </tr> <tr style="height: 17px;"> <td style="width: 59.2px; height: 17px;">9.</td> <td style="width: 84px; height: 17px;">Watt</td> <td style="width: 155.2px; height: 17px;">Power</td> </tr> <tr style="height: 17px;"> <td style="width: 59.2px; height: 17px;">10.</td> <td style="width: 84px; height: 17px;">Coulomb</td> <td style="width: 155.2px; height: 17px;">Quantity of Electricity</td> </tr> <tr style="height: 17px;"> <td style="width: 59.2px; height: 17px;">11.</td> <td style="width: 84px; height: 17px;">Volt</td> <td style="width: 155.2px; height: 17px;">Potential Difference</td> </tr> <tr style="height: 17px;"> <td style="width: 59.2px; height: 17px;">12.</td> <td style="width: 84px; height: 17px;">Ohm</td> <td style="width: 155.2px; height: 17px;">Electrical Resistance</td> </tr> <tr style="height: 17px;"> <td style="width: 59.2px; height: 17px;">13.</td> <td style="width: 84px; height: 17px;">Henry</td> <td style="width: 155.2px; height: 17px;">Inductance</td> </tr> <tr style="height: 26.05px;"> <td style="width: 59.2px; height: 26.05px;">14.</td> <td style="width: 84px; height: 26.05px;">Lumen</td> <td style="width: 155.2px; height: 26.05px;">Luminous Flux</td> </tr> </tbody> </table> <p> </p> <p>- Very small distances are measured in micro-meters or (microns)angstroms (A), nanometers (nm)       and femtometres (fm).</p> <p>- 1m=106µm=109nm= 10m A= 10'5 fm</p> <p>- 1 micron (lµ) = 10-4 cm = 10-6 m</p> <p>- 1 Angstrom (1 A) = 10-8 cm = 10-1° m </p> <p>- 1 Fermi (1F) = 10-13 cm = 10-'5 m</p> <p> </p>";
return new Scaffold(
  appBar: new AppBar(
    title: new Text("Unit and measurement",style: new TextStyle(
      fontFamily: 'Poppins',
    ),),
    centerTitle: true,
  ),
  backgroundColor: Colors.white,
  body: new SingleChildScrollView(
    child: new Center(
      child: new HtmlView(data: html),
      //child: new,
    ),
  ),
);
   }
   }

这是hlml代码链接HTML code link .我认为错误是由于分号引起的。我认为由于我为 hmll 创建了一个表，任何人都可以修复这个分号错误，这是错误消息的屏幕截图 Error message screenshot

Answer 1

Dart 字符串可以用单 或 双引号分隔，例如 'Los Angeles' 或 "San Francisco"。用单引号括起来的字符串可以包含双引号，反之亦然。但是，当您想在字符串中包含相同种类的引号时，您需要对其进行“转义”。查看Language Tour .

由于您的 HTML 包含双引号和单引号，因此您需要对某些内容进行转义。把外面的引号改成单引号

String html = '<h3>Physical Quantities</h3> 

然后在html中查找每个单引号并像这样转义

<p>- 1 Fermi (1F) = 10-13 cm = 10-\'5 m</p>

最终，您可能会从 URL 或资源加载 HTML，而无需对其进行转义。您需要在此处对其进行转义，因为它是您源代码的一部分。