Flutter HTML渲染中段落间距无法正常维持的技术求助

针对你遇到的HTML段落渲染时间距过近的问题，以下是两种直接有效的解决方案，适配你使用的flutter_widget_from_html或flutter_html包：

方案1：使用flutter_widget_from_html的自定义样式构建器 #

该包支持通过customStylesBuilder为指定HTML标签设置自定义样式，直接给<p>标签添加底部外边距即可实现段落间距：

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

class ExampleScreen extends StatelessWidget {
  final String htmlContent = '''
    <p><strong>Place – </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. ’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>
  ''';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('HTML Rendering')),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: HtmlWidget(
            htmlContent,
            customStylesBuilder: (element) {
              // 为所有p标签设置底部外边距，可根据需求调整数值
              if (element.localName == 'p') {
                return {'margin-bottom': '16px'};
              }
              return null;
            },
          ),
        ),
      ),
    );
  }
}

方案2：使用flutter_html包的全局样式配置 #

如果你使用的是flutter_html包（即代码中的Html组件），可以通过style参数直接为<p>标签设置样式：

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';

class ExampleScreen extends StatelessWidget {
  final String htmlContent = '''
    <p><strong>Place – </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. ’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>
  ''';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('HTML Rendering')),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Html(
            data: htmlContent,
            style: {
              'p': Style(
                margin: const EdgeInsets.only(bottom: 16.0),
              ),
            },
          ),
        ),
      ),
    );
  }
}

为什么之前的方法无效？ #

• 手动替换</p>为</p><br><br>：部分HTML渲染包会自动过滤多余的换行标签，或者内部默认样式会覆盖换行的效果，导致间距不生效。
• 外层添加SizedBox：只能给整个HTML块添加统一间距，无法针对每个段落单独设置，无法实现段落间的精准间距控制。

内容的提问来源于stack exchange，提问作者Maenda