Flutter(1)：Text图文混排

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

Name is Q

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

阅读量1.6k

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/qq_36282231/article/details/115348916

版权

本文介绍了Flutter如何使用WidgetSpan轻松实现图文混排功能。通过在文本中插入Widget，例如Image、IconButton等，可以创建高度定制的富文本效果。详细实现原理参考链接：[相关文章](https://blog.csdn.net/zuoyueliang/article/details/104841863?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-8&spm=1001.2101.3001.4242)

摘要由CSDN通过智能技术生成

图中效果使用图文混排实现，要用到WidgetSpan，可以接入任何Widget

Container(
       padding: EdgeInsets.only(top: 12, left: 0, right: 0, bottom: 0),
       child: Text.rich(TextSpan(
          children: [
                WidgetSpan(
                    alignment: PlaceholderAlignment.top,
                     child: ClipOval(
                         child: Container(
                                  width: 6,
                                  height: 6,
                                  color: Color.fromRGBO(237,88,88,1),
                                ),
                              ),
                            ),
                          TextSpan(
                             text:' 暗夜里人们因疲累而沉睡时我们坚守岗位用执行力稳固网格管理我们是网格员 。',
                               style: TextStyle(
                                color: Color.fromRGBO(0, 0, 0, 0.8)