注意:无特殊说明,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实现点击交互。

更多相关阅读:

如果这篇文章有帮助到您,希望您来个“赞”并关注我的公众号,非常谢谢。

Flutter Widgets 之 RichText的更多相关文章

  1. 【Flutter Widgets大全】电子书开源

    [Flutter Widgets大全]是老孟耗费大量精力整理的,总共有330多个组件的详细用法,开源到Github上,希望可以帮助到大家,开源不易,点个赞可不可以. [Flutter Widgets ...

  2. Flutter Widgets 之 InkWell 和 Ink

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 InkWell InkWell组件在用户点击时出现&quo ...

  3. Flutter Widgets 之 FutureBuilder

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 展示异步任务状态 当有一个Future(异步)任务需要展示 ...

  4. Flutter Widgets 之 BottomNavigationBar 和 BottomNavigationBarItem

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

  5. Flutter Widgets 之 ListWheelScrollView

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 基础用法 在展示大量数据的时候我们第一会想到使用ListV ...

  6. Flutter Widgets 之 SnackBar

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 基础用法 应用程序有时候需要弹出消息提示用户,比如'网络连 ...

  7. Flutter Widgets 对话框-Dialog

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 当应用程序进行重要操作时经常需要用户进行2次确认,以避免用 ...

  8. Flutter Widgets

    Flutter Widgets Flutter 组件 Syncfusion Flutter Widgets 所有组件均支持即装即用的 Android,iOS和 Web not free https:/ ...

  9. Flutter Widgets (Container/Row/Column/Image)

    俗话说知己知彼百战百胜,如果对Flutter 里面的各种Widgets不了解,那你就别想将它们组合成你想要的效果.从今天开始.会把一个一个的widget 撸一遍..知道它大概的用法.效果.当你想做某个 ...

随机推荐

  1. RDD(六)——分区器

    RDD的分区器 Spark目前支持Hash分区和Range分区,用户也可以自定义分区,Hash分区为当前的默认分区,Spark中分区器直接决定了RDD中分区的个数.RDD中每条数据经过Shuffle过 ...

  2. USB Reverse Tether (a dirty solution)

    Tether your android phone to your PC using USB cable could share your 3g Internet connection with PC ...

  3. CondaHTTPError: HTTP 000 CONNECTION FAILED for url <https://repo.anaconda.com/pkgs/main/win-64/repodata.json.bz2> Elapsed: -

    将C:\Users\<本机用户名>\.condarc文件修改为 channels: - http://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/ ...

  4. BZOJ 2318: Spoj4060 game with probability Problem (概率dp)(博弈论)

    2318: Spoj4060 game with probability Problem Description Alice和Bob在玩一个游戏.有n个石子在这里,Alice和Bob轮流投掷硬币,如果 ...

  5. Windows_Management_Instrumentation

    WMI是管理系统中的核心 使用本工具的前提是:系统的服务列表中,Windows_Management_Instrumentation(winmgmts)这个服务处于运行状态.如果处于关闭状态,请在运行 ...

  6. fcntl()函数之文件打开状态

    比较有用的就两个. 1.获得/设置文件打开状态标志 oldflag=fcntl(fd,F_GETFL); 获得打开文件的状态标志. arg=oldflag|O_APPEND; fcntl(fd,F_S ...

  7. jenkins-定时跑代码

    build periodically和poll scm都可以定时运行

  8. python-django-celery的安装和配置_20191122

    celery的介绍 celery有三个核心的概念: 任务的发出者(需要发邮件的一方),我们项目的代码就相当于发出者, 中间是一个任务队列(中间人broker),这里我们使用Redis来承担任务队列的作 ...

  9. MOOC(7)- case依赖、读取json配置文件进行多个接口请求-解决用例间依赖问题(17)

    最最重要,处理case依赖.字段依赖 # -*- coding: utf-8 -*- # @Time : 2020/2/13 21:14 # @File : data_depend_17.py # @ ...

  10. zabbix配置文件详解--服务(server)端、客户(agent)端、代理(proxy)端

    在zabbix服务(server)端.客户(agent)端.代理(proxy)端分别对应着一个配置文件,即:zabbix_server.conf,zabbix_agentd.conf,zabbix_p ...