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

Posted 2021-12-28 早起的年轻人

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

---

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

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

---

完毕

---

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

• 手机点击查看 # 电脑点击查看
  

---

• 手机点击查看 # 电脑点击查看