RichText
RichText组件可以用来显示一段包含不同样式的文本。
Text属性
RichText组件中需要显示的文本内容由text属性设置,不同于Text组件,RichText组件需要传入的文本信息不是简单的String类型,而是TextSpan类型。 TextSpan类型本身是一直可以无限递归的树状结构,每个节点除了可以通过text属性传入字符串外,还可以通过style属性自定义文字样式,甚至可以通过children属性传入一个TextSpan列表作为子节点,以实现叠加和嵌套文字样式功能。
RichText(
text: TextSpan(
text:("TextSpan1"),
style:TextStyle(color: Colors.black),
},
children: [
TextSpan(text: "和"),
TextSpan(text: 'TextSpan2',style:TextStyle(color: Colors.red,decoration: TextDecoration.underline),
),
]
),
),
Text组件的Text.rich()构造函数
上面是通过text参数传给RichText组件的TextSpan类型只会继承上级TextSpan树中的样式,而不继承上级DefaultTextStyle组件提供的默认的样式。如果需要使用DefaultTextStyle组件统一设置样式,则可以考虑使用Text组件的Text.rich()构造函数。
Text.rich(
TextSpan(
style:TextStyle(
fontSize:18,
color:Colors.black,
),
text:"textrich",
children: [
TextSpan(text: "和"),
TextSpan(text: 'TextSpan2',style:TextStyle(color: Colors.red,decoration: TextDecoration.underline),
),
]
),
)
触碰检测
可以给文字中某一段文字加入链接:TextSpan中的recognizer参数支持传入一个GestureRecognizer类
RichText(
text: TextSpan(
text:("TextSpan"),
style:TextStyle(color: Colors.black),
recognizer: TapGestureRecognizer()..onTap=(){
print("Tap1");
},
children: [
TextSpan(text: "和"),
TextSpan(text: name,style:TextStyle(
color:Colors.red,
decoration: TextDecoration.underline
),
recognizer:TapGestureRecognizer()..onTap = (){
print("Tap2");
}
),
]
),
),