【文本 widget】Flutter RichText

简介: 【文本 widget】Flutter RichText

RichText 是绘制文本的核心 widget,Text 只是 RichText 的包装而已。文本这块还是相当复杂的,本文介绍一些基本的用法。

参数解析

text

text 是一个 InlineSpanInlineSpan 又可以嵌套 InlineSpan。每一段都可以有自己的样式。

textAlign

textAlign  负责 text 的对齐。RichText size 大于文本的 size  时有效。

wrap

wrap 默认为 true,文本自动换行,如果为 false,不会换行,只在一行显示。

overflow

overflow 默认为 TextOverflow.clip,会截断超出的文本。为 TextOverflow.ellipsis 时,按 maxLine 指定的行数显示,如果有超出显示 ...。

textScaleFactor

放大字体的因子。

maxLines

最多显示行数

selectionColor and  selectionRegistrar

选择文本相关

textHeightBehavior

要会用这个参数,先要明白 什么是 leading

leading  的计算方法TextStyle.height * TextStyle.fontSize - TextStyle.fontSize. 如果 TextStyle.height 没有设置, leading 的默认值由字体决定。一般来说 ,leading 默认不为 0,这也是为什么 文字占据的高度比字体值大的原因。height=1 可以让 leading 为 0。

如果 height 大于1,leading 会大于0,如何分配 leading 就由 textHeightBehavior 决定。

使用举例

RichText(
     text: TextSpan(
         text: 'IAM17',
         style: TextStyle(color: Colors.black),
         children: [
           TextSpan(
             recognizer: TapGestureRecognizer()
               ..onTap = () {
                print('click flutter');
               },
             text: 'Flutter',
             style: TextStyle(fontSize: 20, color: Colors.green)),
           TextSpan(text: '天天更新')
     ]))
复制代码

这样看起来有点乱,嵌套了两层。一个文本在第一层,二个文本在第二层。如果有多个 textSpan 可以省掉第一层的文本。

RichText(
  text:TextSpan(style: TextStyle(color: Colors.black), children: [
    TextSpan(text: 'IAM17'),
    TextSpan(
        recognizer: LongPressGestureRecognizer()
          ..onLongPress = () {
            print('click flutter');
          },
        text: 'Flutter',
        style: TextStyle(fontSize: 20, color: Colors.green)),
    TextSpan(text: '天天更新')
  ]))
复制代码

最外层的 style 是可以保留的,做为公共样式。最外层的文本去掉,这样就可以让所有文本在一个层级上,看起来更规整,也好维护。

你可能注意到本例中直接 new TapGestureRecognizer 对象,这样会导致资源不能及时释放。要释放资源,需要调用 TapGestureRecognizer 的 dispose 方法,垃圾回收不会自动执行 dispose 方法,所以需要我们手动释放。

推荐的做法是这样的。

late LongPressGestureRecognizer _longPressRecognizer;
  @override
  void initState() {
    super.initState();
    _longPressRecognizer = LongPressGestureRecognizer()
      ..onLongPress = _handlePress;
  }
  @override
  void dispose() {
    _longPressRecognizer.dispose();
    super.dispose();
  }
  void _handlePress() {
    print('handle long ress');
  }
  @override
  Widget build(BuildContext context){
      return RichText(
  text:TextSpan(style: TextStyle(color: Colors.black), children: [
    TextSpan(text: 'IAM17'),
    TextSpan(
        recognizer: _longPressRecognizer,
        text: 'Flutter',
        style: TextStyle(fontSize: 20, color: Colors.green)),
    TextSpan(text: '天天更新')
  ]))
  }
复制代码

不要怕麻烦,这样做肯定是没有问题的。

大多时候,一段的文本的样式都是一样的,所以 Flutter 为了我们提供了 Text,Text 把 RichText 进行了包装

return RichText(
     ...
      text: TextSpan(
        style: effectiveTextStyle,
        text: data,
        children: textSpan != null ? <InlineSpan>[textSpan!] : null,
      ),
  );
复制代码

当只有一种样式的文本时,可以这样写

Text('IAM17')
复制代码

代码简化了好多。

如果有多种样式的文本,可以用  Text.rich

Text.rich(
   TextSpan(
        style: TextStyle(color: Colors.black), children: [
            TextSpan(text: 'IAM17'),
            TextSpan(text: 'Flutter'),
        ]))
复制代码

所以我们一般不需要直接使用 RichText,用 Text 或 Text.rich 即可。

目录
相关文章
|
7月前
Flutter 组件(二)文本 与 输入框组件
Flutter 组件(二)文本 与 输入框组件
492 0
|
缓存 Java 开发工具
Flutter的文本、图片和按钮使用
Flutter的文本、图片和按钮使用
132 0
|
2天前
|
容器
Flutter Widget 解析
Flutter Widget 解析
|
2天前
|
存储 容器
Flutter 有状态Widget 和 无状态Widget
Flutter 有状态Widget 和 无状态Widget
|
1月前
深入理解Flutter鸿蒙next版本 中的Widget继承:使用extends获取数据与父类约束
本文详细介绍了Flutter中如何通过继承其他Widget来创建自定义组件。首先解释了Widget继承的基本概念,包括StatelessWidget和StatefulWidget的区别。接着通过具体示例展示了如何继承StatelessWidget和StatefulWidget,并在子类中访问父类的build方法和状态。最后,结合多个自定义Widget展示了如何在实际应用中灵活使用继承和组合来构建复杂的UI。
76 8
|
1月前
|
容器
flutter&鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中,状态管理至关重要。本文详细介绍了如何使用 InheritedWidget 实现跨 Widget 的状态传递。InheritedWidget 允许数据在 Widget 树中向下传递,适用于多层嵌套的场景。通过一个简单的计数器示例,展示了如何创建和使用 InheritedWidget,包括其基础概念、工作原理及代码实现。虽然 InheritedWidget 较底层,但它是许多高级状态管理解决方案的基础。
103 2
|
2月前
|
容器
flutter:第一个flutter&Widget的使用 (二)
本文介绍了Flutter框架下的基本组件及其用法,包括简单的 Stateless Widget 如文本和按钮,以及更复杂的 StatefulWidget 示例。详细解释了如何使用 `context` 获取祖先小部件的信息,并展示了 `MaterialApp` 的属性及用途。此外,还探讨了 `StatefulWidget` 与 `StatelessWidget` 的区别,以及 `AppBar` 的常见属性配置方法。适合Flutter初学者参考学习。
|
1月前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架,用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI,每个 UI 元素都是 Widget,包括文本、按钮、图片等。Widget 不仅描述外观,还描述行为,是不可变的。常见的 Widget 包括结构型(Container、Column、Row)、呈现型(Text、Image)、交互型(ElevatedButton)和状态管理型(StatefulWidget)。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
75 0
|
5月前
|
移动开发 UED 容器
Flutter-自定义可展开文本控件
Flutter-自定义可展开文本控件
98 0
|
5月前
Flutter-底部弹出框(Widget层级)
文章描述了如何在Flutter中使用DraggableScrollableSheet创建一个底部弹出框,同时保持其可手势滑动关闭。作者遇到问题并提出对原控件进行扩展,以支持头部和列表布局的滑动关闭功能。
199 0