使用flutter_html_view插件时,如何在flutter中修复此错误

时间:2018-05-31 16:29:49

标签: dart flutter

我正在创建一个应用程序,我希望使用flutter_html_view插件(LInK)在flutter中查看html页面我在这里收到错误是错误消息的屏幕截图Error message screenshot这里是截图html HTML的内容 这是扑动代码

    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。 我认为错误是由分号引起的。我认为由于我为hlml创建了一个表,任何人都可以修复这个分号错误,并且是错误消息的屏幕截图Error message screenshot

1 个答案:

答案 0 :(得分:0)

Dart字符串可以使用单个双引号分隔,例如'Los Angeles'"San Francisco"。用单引号括起来的字符串可以包含双引号,反之亦然。但是,当您想要在字符串中包含相同种类的引用时,您需要“逃避”#39;它。请参阅Language Tour

由于您的HTML包含双引号和单引号,因此您需要远离某些内容。将外部引号改为单引号

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

然后在html中查找每个单引号并将其转义为

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

最终,您可能会从URL或资产加载HTML,而您无法逃脱它。你需要在这里转义它,因为它是源代码的一部分。