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

最新推荐文章于 2024-06-22 18:41:58 发布

早起的年轻人

最新推荐文章于 2024-06-22 18:41:58 发布

阅读量3.5k

点赞数

分类专栏： Flutter项目开发全套教程文章标签： flutter 前端

本文链接：https://blog.csdn.net/zl18603543572/article/details/121703825

版权

Flutter项目开发全套教程专栏收录该内容

285 篇文章

订阅专栏

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

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

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

直接上关键核心代码

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 对齐方式核心概述

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

完毕

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