flutter文本和小图标在同一行显示

锐湃

于 2021-09-01 17:25:13 发布

阅读量2.1k

点赞数

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

原文链接：https://www.jianshu.com/p/a44d3d8894d7

版权

flutter 专栏收录该内容

82 篇文章

订阅专栏

本文介绍了如何在Flutter的Text.rich组件中利用WidgetSpan和Image.asset来实现文字与图片的混合展示，以创建带有图片标志的文本内容，例如在'乐讯>每日转发赚'后面添加图片标志，从而丰富UI表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Text.rich中使用WidgetSpan来处理图片
效果如下：

代码如下：

Text.rich(
              TextSpan(
                style: TextStyle(fontSize: R.size_32, fontWeight: FontWeight.bold),
                children: [
                  TextSpan(
                    text: '乐讯>每日转发 赚',
                  ),
                  WidgetSpan(
                    child: Image.asset('images/base/money_red_icon.png'),
                  ),
                  TextSpan(
                    text: ' 标志的资讯，赚取佣金～',
                  ),
                ],
              ),
            ),

作者：yuanzhiying
链接：https://www.jianshu.com/p/a44d3d8894d7
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。