Flutter实现文本尾部添加跟随图标
一、需求
再一段文本的最后添加图标,图标紧贴文本末尾,随文本换行而换行。
效果图:
二、知识点
1、WidgetSpan
WidgetSpan在文本中内嵌固定大小Widget。
WidgetSpan({
this.child,
ui.PlaceholderAlignment alignment = ui.PlaceholderAlignment.bottom,//对齐方式
TextBaseline baseline,//基准线对齐
TextStyle style,//文本样式
})
2、TextSpan
文本片段,html里有个span这里有个TextSpan,作用基本相同,文字放一行,text与children任选一样填写。
TextSpan与RichText配合使用可以实现不同样式文字布局。
TextSpan({
this.text,
this.children,//是一个TextSpan的数组,也就是说TextSpan可以包括其他TextSpan
TextStyle style,
this.recognizer,//它是点击链接后的一个处理器,用于对该文本片段上用于手势进行识别处理,设定手势识别器
this.semanticsLabel,
})
三、实现
这是用到了 Text.rich();来实现富文本显示文本片段。
Text.rich(
TextSpan(
style: TextStyle(
fontSize: 20.sp, color: Colors.white),
children: [
TextSpan(text:'带你涨知识'),
WidgetSpan(
baseline: TextBaseline.ideographic,
child: TopicEndIcon(
size: 18,
),
),
],
),
),