我们在进行开发的时候经常会遇到一段文本中会有不同的字体,不同的颜色展示,在Android开发中我们会使用SpannableString或者Html.fronHtml来进行处理,那么在Flutter中如何处理来做这样的展示呢,Flutter为我们提供了一个可以展示多中样式的Widget - RichText。
首先先看下在最简单的使用方法
RichText(
text: TextSpan(children: [
TextSpan(
text: "我爱学习",
style: TextStyle(color: Colors.greenAccent, fontSize: 24)),
TextSpan(
text: "我爱学习",
style: TextStyle(color: Colors.yellow, fontSize: 32)),
TextSpan(
text: "我爱学习",
style: TextStyle(color: Colors.red, fontSize: 44),
semanticsLabel: "这是Flutter")
]),
)
下面看下RichText的源码
RichText({
Key key, //Widget的标识
@required this.text,//文字片段,类型 InlineSpan,通常我们会用TextSpan(它是InlineSpan的子类)
this.textAlign = TextAlign.start,//文本的对齐方式,类型 TextAlign
this.textDirection,//文字方向,类型 TextDirection
this.softWrap = true,//bool类型 是否支持软换行符,false表示只有一行,水平无限延伸
this.overflow = TextOverflow.clip,// 文字的截断方式,类型TextOverflow
this.textScaleFactor = 1.0,//double类型,代表相对于当前字体大小的缩放因子,默认值为1.0
this.maxLines,//int类型 显示的最大行数
this.locale,//用于选择用户语言和格式设置首选项的标识符 类型 Locale
this.strutStyle,//使用的支柱风格 类型StrutStyle
this.textWidthBasis = TextWidthBasis.parent,
}) : assert(text != null),
assert(textAlign != null),
assert(softWrap != null),
assert(overflow != null),
assert(textScaleFactor != null),
assert(maxLines == null || maxLines > 0),
assert(textWidthBasis != null),
super(key: key, children: _extractChildren(text));
注:RichText 中除了text 是必选的,其他的都是可选参数
下面着重看下TextSpan这个Widget,另外几个在上一篇Flutter 学习 - Widget 之 Text中已进行详细介绍,这里不再赘述
TextSpan : 如果我们需要对一个Text内容的不同不分按照不同的样式显示,这时就可以使用TextSpan,它代表文本的一个片段,然后把不同的TextSpan组合起来
下面先看TextSpan的使用方法
TextSpan(
text: "我爱学习",
style: TextStyle(color: Colors.red, fontSize: 44)),
接下来看源码
const TextSpan({
this.text, //类型String ,要显示的文字
this.children,//子TextSpan 类型是List< TextSpan>
TextStyle style,//文本样式 类型是TextStyle
this.recognizer,//一个手势识别器,它将接收到达此文本范围的事件,类型是GestureRecognizer
this.semanticsLabel,//语义标签,无实际用处,用于向Android上的TalkBack和iOS的VoiceOver提供图像描述
}) : super(style: style,);
注:Talkback是一款由谷歌官方开发的系统软件,它的定位是帮助盲人或者视力有障碍的用户提供语言辅助
Voiceover功能是苹果公司在2009年4月新推出的一种语音辅助程序
截止到现在,RichText 就介绍完了。
以下是我的Flutter系列的链接,后续会持续更新,欢迎大家指正。
Flutter 系列文章
- Flutter 学习 - 开篇
- Flutter 学习 - 基础框架
- Flutter 学习 - 网络请求和数据解析
- Flutter 学习 - Widget 之 Text
- Flutter 学习 - Widget 之 RichText