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基础widgets教程-Tooltip篇
Flutter基础widgets教程-Tooltip篇
396 0
|
7天前
|
索引
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/GridView
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/GridView
34 0
|
7天前
|
Android开发 iOS开发
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ScrollView
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ScrollView
56 0
|
7天前
|
开发者
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/BoxScrollView
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/BoxScrollView
38 0
|
7天前
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ListView
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ListView
32 0
|
存储 算法 前端开发
flutter系列之:widgets,构成flutter的基石
flutter中所有的组件都是由widgets组成的,flutter中有各种各样的widgets,这些widgets构成了flutter这个大厦。 那么flutter中的widget有什么特点呢?我们应该怎么学习widget呢? 一起来看看吧。
flutter系列之:widgets,构成flutter的基石
Flutter基础widgets教程-Transform篇
Flutter基础widgets教程-Transform篇
234 0
Flutter基础widgets教程-Transform篇
Flutter基础widgets教程-SizedOverflowBox篇
Flutter基础widgets教程-SizedOverflowBox篇
142 0
Flutter基础widgets教程-SizedOverflowBox篇
Flutter基础widgets教程-SizedBox篇
Flutter基础widgets教程-SizedBox篇
189 0
Flutter基础widgets教程-SizedBox篇
Flutter基础widgets教程-OverflowBox篇
Flutter基础widgets教程-OverflowBox篇
268 0
Flutter基础widgets教程-OverflowBox篇