如何使用flutter_html插件在flutter中自定义UL>LI

Question

我需要自定义

second line

上文本的

ul > li

。我遇到的问题是

bullet point is above the text

。如何解决下面附件中显示的问题或颤动中的任何本机方式，我可以获得正确的要点？目前，正如我所说，我正在使用

flutter_html

插件，列表由

WYSIWYG editor

存储在数据库中。简而言之，这是一个

HTML code

。

小部件链接：https://pub.dev/packages/flutter_html

Html(
  data: data.disclaimer,
  customTextStyle: (dom.Node node, TextStyle baseStyle) {
  if (node is dom.Element) {
  switch (node.localName) {
  case "ul":
   return baseStyle.merge(Theme.of(context).textTheme.title.copyWith(fontWeight: FontWeight.w300, fontSize: 16));
    }
   }
  return baseStyle;
 },
),

Answer 1

这里最简单的解决方案是在文本小部件中使用项目符号“•”。要使文本仅在文本下方对齐，您可以将小部件放置在一行中。这样，文本就不会与项目符号重叠。

Row(
  children: [
    Text('•'),
    Text(yourString),
  ],
)

Answer 2

我创建了以下小部件来处理此问题。

    import 'package:flutter/material.dart';

class UlWidget extends StatelessWidget {
  final String? text;
  final TextStyle? textStyle;
  final List<LiWidget> children;
  final EdgeInsets? contentPadding;
  final EdgeInsets? padding;
  final double verticalSpacing;

  const UlWidget({
    this.text,
    this.textStyle,
    this.padding,
    this.contentPadding,
    this.verticalSpacing = 8.0,
    required this.children,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: padding ?? const EdgeInsets.symmetric(vertical: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          if (text != null)
            Text(
              text!,
              style: textStyle ??
                  TextStyle(
                    fontWeight: FontWeight.w600,
                  ),
            ),
          if (text != null)
            const SizedBox(
              height: 12,
            ),
          Padding(
            padding: contentPadding ??
                const EdgeInsets.symmetric(
                  horizontal: 12.0,
                  vertical: 8,
                ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: children
                  .expand((element) => [
                        element,
                        SizedBox(
                          height: verticalSpacing,
                        ),
                      ])
                  .toList(),
            ),
          )
        ],
      ),
    );
  }
}

class LiWidget extends StatelessWidget {
  final String data;
  final TextStyle? style;
  final double dotSize;
  final Color? dotColor;

  const LiWidget({
    required this.data,
    this.style,
    this.dotColor,
    this.dotSize = 8,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Icon(
          Icons.circle,
          size: dotSize,
          color: dotColor ?? Colors.grey.shade900,
        ),
        const SizedBox(
          width: 12,
        ),
        Expanded(
          child: Text(
            data,
            style: style,
          ),
        ),
      ],
    );
  }
}

用途：

        UlWidget(
          text: 'This is a UL tag with the follow things:',
          children: [
            LiWidget(data: 'Somehting goes here;'),
            LiWidget(data: 'Another text goes here;'),
            LiWidget(data: 'And so on.'),
          ],
        ),