Flutter RichText 使用案例解析 Flutter WidgetSpan 设置图片显示

╰+攻爆jí腚メ 2023-10-07 17:29 17阅读 0赞

> 也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。

--------------------

在Flutter中 RichText 可以说是一个简单的富文本，可以用来实现一段文字中，局部文字 加粗 设置颜色显示等，是结合 TextSpan 来实现的，当然也可以在文本段落中嵌入其他如小图片、图标、按钮等等，这就需要使用 WidgetSpan

--------------------

本文章的 Demo 案例如下  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_18_color_FFFFFF_t_70_g_se_x_16]

直接上关键核心代码

RichText(
      text: TextSpan(
        text: '登陆即同意登陆即同意登陆即同意登陆即同意登陆即同意',
        style: const TextStyle(color: Colors.black),
        children: [
    
          WidgetSpan(
            //对齐方式
            alignment: PlaceholderAlignment.middle,
            //这里就是中间显示的图片了也可以是其他任意的 Widget
            child: Image.asset(
              "images/banner01.webp",
              width: 40,
              height: 40,
            ),
          ),
    
          
          TextSpan(
            text: '《服务条款》',
            style: const TextStyle(color: Colors.red),
            //文本的点击事件
            recognizer: TapGestureRecognizer()..onTap = () {
        },
          ),
          
          
          const TextSpan(
            text: '和',
            style: TextStyle(color: Colors.black),
          ),
          
          WidgetSpan(
            //图片底部对齐 
            alignment: PlaceholderAlignment.bottom,
            child: Image.asset(
              "images/banner01.webp",
              width: 40,
              height: 40,
            ),
          ),
          
          TextSpan(
            text: '《隐私政策》',
            style: const TextStyle(color: Colors.red),
            recognizer: TapGestureRecognizer()..onTap = () {
        },
          ),
        ],
      ),
    );

WidgetSpan 中的 PlaceholderAlignment 对齐方式核心概述

1.  PlaceholderAlignment.baseline 与文本的基线对齐
2.  PlaceholderAlignment.aboveBaseline 将占位符的底部边缘与基线对齐，使占位符位于基线的顶部。使用该对齐模式时，\[TextBaseline\]必须指定为非null。
3.  PlaceholderAlignment.belowBaseline 将占位符的上边缘与指定的基线对齐，以便占位符挂起在基线以下。使用该对齐模式时，\[TextBaseline\]必须指定为非null。
4.  PlaceholderAlignment.top 将占位符的上边缘与文本的上边缘对齐。当占位符很高时，额外的空间将从顶部悬挂并延伸到底部
5.  PlaceholderAlignment.bottom 将占位符的底边与文本的底边对齐。当占位符很高时，额外的空间将从底部上升，并延伸到线的顶部。
6.  PlaceholderAlignment.middle 将占位符的中间对齐文本的中间。当占位符很高时，额外的空间将从顶部和底部平均增长。

--------------------

完毕

--------------------

小编也写了几本书，如果你有兴趣可以去看看

*  [手机点击查看][Link 1] \# [电脑点击查看][Link 2]  
    ![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]

--------------------

*  [手机点击查看][Link 3] \# [电脑点击查看][Link 4]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d71fefb3ddcf4d54884a2285d7d65199.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_18,color_FFFFFF,t_70,g_se,x_16
[Link 1]: https://m.tb.cn/h.f6IsZcl?sm=b5555a
[Link 2]: https://detail.tmall.com/item.htm?id=658886049139
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ed9ecf4aacc84e5cb17d5b486e431083.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 3]: https://item.m.jd.com/product/10040957873690.html?&utm_source=iosapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=CopyURL&ad_od=share&utm_user=plusmember&gx=RnFjxjUIbWGNztQUp4J3XrJgfXzlaNZ0
[Link 4]: https://item.jd.com/13009851.html
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/0b0016200df2484aa2029c1b20224fee.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center