专栏首页FlutterFlutter Widgets 之 RichText
原创

Flutter Widgets 之 RichText

注意:无特殊说明,Flutter版本及Dart版本如下:Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0

基础用法

应用程序离不开文字的展示,因此文字的排版非常重要,通常情况下Text组件可以完成绝大多数需求,它可以显示不同大小的文字、字体、颜色等,如果想在一句话或者一段文字里面显示不同样式的文字,Text组件无法满足我们的需求,这个时候需要使用RichText

RichText(
      text: TextSpan(
          style: DefaultTextStyle.of(context).style,
          children: <InlineSpan>[
            TextSpan(text: '老孟',style: TextStyle(color: Colors.red)),
            TextSpan(text: ','),
            TextSpan(text: '一个有态度的程序员'),
          ]),
    )

RichText 组件的text属性是TextSpan,TextSpan中的style样式需要设置属性,不设置无法显示文字,一般设置应用程序的默认字体样式DefaultTextStyle.of(context).style,在子组件其中一个TextSpan设置不同的样式,比如上面的代码中设置“老孟”文字为红色,效果如下:

当文字有较多行时,可以设置其对齐方式:

RichText(
	textAlign: TextAlign.end,
	...
)

TextAlign.start的效果:

TextAlign.center的效果:

TextAlign.end的效果:

手势交互

当然我们也可以设置其他样式,比如大小、斜体等,甚至我们还可以添加点击效果,

RichText(
      text: TextSpan(
          style: DefaultTextStyle.of(context).style,
          children: <InlineSpan>[
            TextSpan(text: '登陆即视为同意'),
            TextSpan(
              text: '《xxx服务协议》',
              style: TextStyle(color: Colors.red),
              recognizer: TapGestureRecognizer()..onTap = () {
                
              },
            ),
          ]),
    )

recognizer属性指定手势交互,类型是GestureRecognizer,GestureRecognizer是抽象类,一般使用其子类TapGestureRecognizer实现点击交互。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter 强大的MediaQuery控件

    通常情况下,不会直接将MediaQuery当作一个控件,而是使用MediaQuery.of获取当前设备的信息,用法如下:

    老孟程序员
  • Flutter 强大的MediaQuery控件

    通常情况下,不会直接将MediaQuery当作一个控件,而是使用MediaQuery.of获取当前设备的信息,用法如下:

    老孟程序员
  • Flutter 拖拽控件Draggable看这一篇就够了

    Draggable组件有2个必须填写的参数,child参数是子控件,feedback参数是拖动时跟随移动的组件,用法如下:

    老孟程序员
  • DBA的道德修养

    最近接到一则数据恢复请求,客户声称数据库被黑,经调查实际上是遭到解雇DBA的入侵,删除了所有Oracle数据文件和近期备份,经 过存储级别的恢复,数据仍不完整。...

    数据和云
  • 小心Windows旧版认证暴露你的系统帐户密码

    当你正用浏览器访问网站时,Windows的一个古老漏洞就可能泄露了你电脑的用户名密码、微软登录信息,甚至还有你VPN的账号密码。 多年以前当Windows还在使...

    FB客服
  • Hadoop基础教程-第14章 大数据面试笔试题汇总(持续更新)

    第14章 大数据面试笔试题汇总(持续更新) 注意:大部分题目来自互联网,部分题目来自同事口述 14.1 Zookeeper (1)Zookeeper是什...

    程裕强
  • JSP简单入门(3)

    3、<jsp:param>标签 当使用<jsp:include>标签和<jsp:forward>标签引入或将请求转发给的资源是一个能动态执行的程序时,还可以使用...

    奋斗蒙
  • JSP简单入门(2)

    六、行为元素(JSP标签,简述) JSP提供了一种称之为Action的元素,在JSP页面中使用Action元素可以完成各种通用的JSP页面功能。Action元素...

    奋斗蒙
  • JSP简单入门(1)

    JSP页面中可以包含模板元素、脚本元素、EL表达式、注释、指令、和行为元素(JSP标签)等内容。有三种类型的脚本元素:JSP脚本片断、JSP表达式和JSP声明,...

    奋斗蒙
  • Excel依然是一款强大的数据可视化利器~

    早期的数据小魔方用户大概都知道,我最初也是从学习Excel起步的,只是学习的深入了之后,才开开慢慢的迁移到R语言。 我往R语言转型并不代表自己开始放弃Excel...

    数据小磨坊

扫码关注云+社区

领取腾讯云代金券