在Flutter HTML渲染中难以保持段落间距

14ifxucb  于 2023-06-30  发布在  Flutter
关注(0)|答案(1)|浏览(156)

在Flutter应用程序中渲染HTML内容时,我们面临着保持段落间距的困难。我们希望显示段落之间具有适当间距的段落,但我们遇到了布局问题。
下面是我们尝试呈现的HTML内容的示例:

<p><strong>Place &#8211; </strong>Na een roerige laatste week waarin wederom de noodzaak tot handelen rondom de Rotte Kies heeft de SP voorafgaand aan de raadsvergadering 418 steunbetuigingen overhandigd aan wethouder van economie, arbeidsmarkt, sport en dienstverlening aangeboden.</p>
<p>Maandag 19 juni was de groot nieuws in de regio. In de ochtend was er een melding van een klein brandje in dit verpauperde complex tegenover het oude ziekenhuis. &#8217;s Middags moesten er echter meerdere brandweerkorpsen uit de regio aan te pas komen om een grote uitslaande brand te bestrijden. Zij konden echter niet voorkomen dat een groot deel van het complex is ingestort waardoor het geheel nu een nóg mistroostiger aanblik heeft.</p>
<p>De SP is sinds 20 mei bezig om steunbetuigingen voor hun petitie te verzamelen waarin de partij de gemeente oproept actie te ondernemen tegen de eigenaar van het terrein. In die periode heeft de SP 418 handtekeningen verzameld, zowel online als fysiek tijdens twee marktdagen. Ook SP Jongeren is maandag nog deur-aan-deur geweest om met de mensen in gesprek te gaan.</p>
<p>Voorafgaand aan de raadsvergadering heeft een bestuurslid van de SP, samen met een delegatie vanuit bestuur en kerngroep de petitie symbolisch overhandigd aan verantwoordelijk wethouder. Namens de afdeling en namens de ondertekenaars riep op om actie te ondernemen. Zeker na de grote brand van afgelopen maandag is het wel duidelijk dat de tijd van pappen en nathouden wel klaar is nu en dat de wethouder lering zou moeten trekken uit de honderden adviezen die door de ondertekenaars van de petitie werden voorgedragen.</p>
<p>De SP zal zeker een vinger aan de pols houden en niet schromen opnieuw in actie te komen als er geen oplossing wordt gevonden binnen afzienbare tijd.</p>

我们已经尝试使用flutter_widget_from_html包呈现HTML内容,但是没有保留段落之间的间距。我们还尝试使用SizedBox手动添加间距,但它似乎会干扰段落的呈现。
下面是我们代码的简化版本:

// Code snippet
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';

class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTML Rendering'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            HtmlWidget(
              '<p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p>',
            ),
          ],
        ),
      ),
    );
  }
}

也试过了:

Html(
                data:
                    '<div>${content.replaceAll('</p>', '</p><br><br>')}</div>'),
          ],

我们期望看到每个段落之间有适当的间距显示,但它们似乎紧密地组合在一起。如何在Flutter中渲染HTML内容时实现所需的段落间距?
任何帮助或指导将不胜感激。感谢您的评分

i7uaboj4

i7uaboj41#

您的第二个示例似乎使用了flutter_html包,它应该已经为您处理好了。
https://pub.dev/packages/flutter_html

Html(
  data: '<p>Paragraph 1</p><p>Paragraph 2<br>Which contains a second line</p><p>Paragraph 3</p>',
),

如果您对结果不满意,您可以简单地使用自定义样式来编辑段落中的填充:

Html(
  data: '<p>Paragraph 1</p><p>Paragraph 2<br>Which contains a second line</p><p>Paragraph 3</p>',
  style: {
    'p': Style(padding: HtmlPaddings.symmetric(vertical: 20))
  },
),

当然,你可以随意编辑。

如果你想使用flutter_widget_from_html,你应该能够使用他们的customStylesBuilder来添加自定义填充到段落中(如果默认情况下确实不包括)。

更新

当我使用您的示例HTML数据运行这两个HTML包中的任何一个时,它们都产生了类似的结果,默认情况下段落之间有填充。
除了使用各自包的customStylesBuilderstyle属性外,还可以直接在HTML数据中包含style和一些额外的padding内联。即

<style padding="10dp" />

相关问题