我们可以使用 flutter_widget_from_html 包来设置 html 标签的样式吗

Question

我正在使用 flutter_widget_from_html 包获取 html 代码并显示如下图所示。

但现在我需要在网站上设置类似的样式。

我试图找到一个指南来做到这一点，但没有成功。

我只需要做这样的事情，

如果它是一个标签，我需要将文本样式设置为 bodyLarge 或将文本颜色设置为蓝色。

这是我简单的颤振代码。

    class ArticleScreen extends StatelessWidget {
  final String? id;

  const ArticleScreen({
    Key? key,
    this.id,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)?.settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Article'),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: HtmlWidget(
            args.toString(),
            textStyle: Theme.of(context).textTheme.displaySmall,
          ),
        ),
      ),
    );
  }
}

如果你们能帮我解决这个问题，那对我来说将是一个巨大的帮助。

谢谢你。

Answer 1

美好的一天，如果我正确地回答了你的问题，你想要设置单独的 HTML 标签的样式。 HtmlWidget 有一个可以使用的 customStylesBuilder 属性

`class ArticleScreen extends StatelessWidget {
  final String? id;

  const ArticleScreen({
    super.key,
    this.id,
  });

  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)?.settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Article'),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: HtmlWidget(
            args.toString(),
            //Adding style 
            customStylesBuilder: (element) {
          if (element.localName == 'h1') {
            return {
              'color': 'blue'
            };
          }},
            textStyle: Theme.of(context).textTheme.displaySmall,
          ),
        ),
      ),
    );
  }
}`