如何使用flutter_html将CSS样式应用于跨度

时间:2019-05-21 14:53:32

标签: html flutter

我在我的应用程序上使用flutter_html包从API解析HTML。 html代码是:

<p>Text text text text <span style="background: #FF0000; color: #FFFFFF; padding: 2px 5px; border-radius: 3px">XX</span> text text</p>

它应该像https://i.imgur.com/0056kcT.png

那样打印

但是它以这种方式打印https://i.imgur.com/FXO5dKD.png

为此,我最大的收获就是像这样修补flutter_html包:

if(node.attributes.isNotEmpty){
              if(node.attributes['background'] != null){
                childStyle = childStyle.merge(TextStyle(

                    //backgroundColor: Color(int.parse(node.attributes['background']))));
                    background: Paint()
                      ..color = Color(int.parse(node.attributes['background']))
                      ..style = PaintingStyle.fill
                      ..strokeCap = StrokeCap.round
                      ..strokeWidth = 2.0
                ));
              }
              if(node.attributes['color'] != null){
                childStyle = childStyle.merge(TextStyle(
                    color: Color(int.parse(node.attributes['color']))));
              }
              if(node.attributes['padding'] != null){
                childStyle = childStyle.merge(TextStyle(
                    wordSpacing: double.parse(node.attributes['padding'])));
              }
            }

但是如何添加圆角边框和填充?

谢谢

1 个答案:

答案 0 :(得分:0)

flutter_html当前不支持内联和样式标签中的css。 1.0.0版已计划支持这两种用例。它应该在2019年11月下旬发布。

来源:我是flutter_html软件包的所有者/负责人。