Flutter --RichText富文本文字图片渲染及点击事件处理使用

RichText(
    strutStyle:
    StrutStyle(forceStrutHeight: true, height: 0.5, leading: 0.7),
    text: TextSpan(
      text:
      "You've earned 5 stocks You've earned 5 stocks",
      style: styled9Size12,
      children: [
        TextSpan(
            text: "Terms and conditions apply",
            style: styleColor007affSize12,
            recognizer: TapGestureRecognizer()
              ..onTap = () {
                Logger("------------Jump H5 Page");
              }),
      ],
    ),
  )

效果如图

recognizer 处理点击事件（超链接跳转等业务处理）

也可以通过 Text.rich实现

Text.rich(
    TextSpan(
      text:
      "You've earned 5 stocks You've earned 5 stocks",
      style: styled9Size12,
      children: [
        TextSpan(
            text: "Terms and conditions apply",
            style: styleColor007affSize12,
            recognizer: TapGestureRecognizer()
              ..onTap = () {
                Logger("------------Jump H5 Page");
              }),
      ],
    ),
  )

 

 

WidgetSpan

=======================

RichText(
    strutStyle: StrutStyle(forceStrutHeight: true, height: 0.5, leading: 0.7),
    text: TextSpan(
      text: "You've earned 5 stocks You've earned 5 stocks",
      style: styled9Size12,
      children: [
        WidgetSpan(
          child: GestureDetector(
            child: Text(
              "Terms and conditions apply",
              style: styleColor007affSize12,
            ),
            onTap: () {},
          ),
        ),
      ],
    ),
  ),

上图效果和这个效果 蓝色部分显示不一样，应该是 TextSpan 按文字处理，一个单词一个单词渲染， WidgetSpan是做为一个整体，渲染 Terms and conditions apply 之后同一行不能完全显示，就只能换行显示，

WidgetSpan 的child 可以再放其他widget，所以扩展性比较强

 

 RichText(
    strutStyle: StrutStyle(forceStrutHeight: true, height: 0.5, leading: 0.7),
    text: TextSpan(
      text: "You've earned 5 stocks You've earned 5 stocks",
      style: styled9Size12,
      children: [
        WidgetSpan(
          child: GestureDetector(
            child: Text(
              "Terms and conditions apply",
              style: styleColor007affSize12,
            ),
            onTap: () {},
          ),
        ),
        WidgetSpan(
          child: GestureDetector(
            child: Icon(
              Icons.send,
              color: Colors.red,
            ),
            onTap: () {},
          ),
        ),
      ],
    ),
  ),

 

如图富文本中添加图片

TextStyle styleColor007affSize12 = TextStyle(
  fontSize: setFontSize(12),
  fontWeight: FontWeight.w600,
  color: Color(0xFF007AFF),
  fontFamily: "SF Pro Display",
  decoration: TextDecoration.none,
);

TextStyle styled9Size12 = TextStyle(
  fontSize: setFontSize(12),
  fontWeight: FontWeight.normal,
  color: Color(0xffd9d9d9),
  fontFamily: "SF Pro Display",
  decoration: TextDecoration.none,
);