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
实现点击交互。
更多相关阅读:
- Flutter系列文章总览
- Flutter Widgets 之 Expanded和Flexible
- Flutter Widgets 之 AnimatedList
- Flutter Widgets 之 SliverAppBar
如果这篇文章有帮助到您,希望您来个“赞”并关注我的公众号,非常谢谢。
Flutter Widgets 之 RichText的更多相关文章
- 【Flutter Widgets大全】电子书开源
[Flutter Widgets大全]是老孟耗费大量精力整理的,总共有330多个组件的详细用法,开源到Github上,希望可以帮助到大家,开源不易,点个赞可不可以. [Flutter Widgets ...
- Flutter Widgets 之 InkWell 和 Ink
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 InkWell InkWell组件在用户点击时出现&quo ...
- Flutter Widgets 之 FutureBuilder
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 展示异步任务状态 当有一个Future(异步)任务需要展示 ...
- Flutter Widgets 之 BottomNavigationBar 和 BottomNavigationBarItem
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 BottomNavigationBar 和 BottomN ...
- Flutter Widgets 之 ListWheelScrollView
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 基础用法 在展示大量数据的时候我们第一会想到使用ListV ...
- Flutter Widgets 之 SnackBar
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 基础用法 应用程序有时候需要弹出消息提示用户,比如'网络连 ...
- Flutter Widgets 对话框-Dialog
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 当应用程序进行重要操作时经常需要用户进行2次确认,以避免用 ...
- Flutter Widgets
Flutter Widgets Flutter 组件 Syncfusion Flutter Widgets 所有组件均支持即装即用的 Android,iOS和 Web not free https:/ ...
- Flutter Widgets (Container/Row/Column/Image)
俗话说知己知彼百战百胜,如果对Flutter 里面的各种Widgets不了解,那你就别想将它们组合成你想要的效果.从今天开始.会把一个一个的widget 撸一遍..知道它大概的用法.效果.当你想做某个 ...
随机推荐
- RDD(六)——分区器
RDD的分区器 Spark目前支持Hash分区和Range分区,用户也可以自定义分区,Hash分区为当前的默认分区,Spark中分区器直接决定了RDD中分区的个数.RDD中每条数据经过Shuffle过 ...
- USB Reverse Tether (a dirty solution)
Tether your android phone to your PC using USB cable could share your 3g Internet connection with PC ...
- 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/ ...
- BZOJ 2318: Spoj4060 game with probability Problem (概率dp)(博弈论)
2318: Spoj4060 game with probability Problem Description Alice和Bob在玩一个游戏.有n个石子在这里,Alice和Bob轮流投掷硬币,如果 ...
- Windows_Management_Instrumentation
WMI是管理系统中的核心 使用本工具的前提是:系统的服务列表中,Windows_Management_Instrumentation(winmgmts)这个服务处于运行状态.如果处于关闭状态,请在运行 ...
- fcntl()函数之文件打开状态
比较有用的就两个. 1.获得/设置文件打开状态标志 oldflag=fcntl(fd,F_GETFL); 获得打开文件的状态标志. arg=oldflag|O_APPEND; fcntl(fd,F_S ...
- jenkins-定时跑代码
build periodically和poll scm都可以定时运行
- python-django-celery的安装和配置_20191122
celery的介绍 celery有三个核心的概念: 任务的发出者(需要发邮件的一方),我们项目的代码就相当于发出者, 中间是一个任务队列(中间人broker),这里我们使用Redis来承担任务队列的作 ...
- MOOC(7)- case依赖、读取json配置文件进行多个接口请求-解决用例间依赖问题(17)
最最重要,处理case依赖.字段依赖 # -*- coding: utf-8 -*- # @Time : 2020/2/13 21:14 # @File : data_depend_17.py # @ ...
- zabbix配置文件详解--服务(server)端、客户(agent)端、代理(proxy)端
在zabbix服务(server)端.客户(agent)端.代理(proxy)端分别对应着一个配置文件,即:zabbix_server.conf,zabbix_agentd.conf,zabbix_p ...