上一节介绍了Flutter布局，Flutter提供丰富的布局工具和技术，适用于各种应用UI场景。但是我们知道构建一个界面需要各种元素，比如文本、输入框、选中框、进度条、列表......

这一节主要介绍文本部件。

Text

Text部件显示单一样式的文本字符串。根据布局约束，字符串可能跨多行中断，也可能全部显示在同一行上。

style参数是可选的，当省略时，文本将使用最近的封闭DefaultTextStyle的样式。如果给定的样式是TextStyle.inherit为true(默认值)，则给定的样式将与最近的封闭DefaultTextStyle合并。这种合并行为非常有用，例如，在使用默认字体系列和大小的情况下使文本加粗等。

构造函数

const Text(    String this.data, ////要显示的文本字符串  {      super.key, //部件的key    this.style,  //用于指定文本样式的TextStyle对象，包括字体大小、颜色、粗细等    this.strutStyle, //定义行框的最小高度和行间距    this.textAlign,  //是否以及如何水平对齐文本    this.textDirection, //文字显示的方向 rtl(右->左)  ltr(左->右)    this.locale,  //用于选择用户的语言和格式首选项的标识符    this.softWrap, //指文字在一行已满后转到新行，使每行都可在视窗范围看到，不需水平滚动    this.overflow, //应该如何处理过多的文本    this.textScaler, //文本内容应该如何缩放以获得更好的可读性    this.maxLines, //最多显示多少行    this.semanticsLabel, //辅助工具用于描述具有残障用户的文本的描述    this.textWidthBasis, //测量一行或多行文本宽度的不同方法    this.textHeightBehavior, //指定文本中一行可以占用的最小和最大高度    this.selectionColor, //文本被选择时要使用的背景颜色  }) 

Text.rich(    InlineSpan this.textSpan, {    super.key,    this.style,    this.strutStyle,    this.textAlign,    this.textDirection,    this.locale,    this.softWrap,    this.overflow,    this.textScaler,    this.maxLines,    this.semanticsLabel,    this.textWidthBasis,    this.textHeightBehavior,    this.selectionColor,  })

TextSpan({    this.text,  //要显示的文本    this.children, //包含在这个TextSpan中的子TextSpan列表，允许混合不同样式和文本。    super.style, //应用于这个TextSpan的文本样式，如字体大小、颜色和粗细。这是从父InlineSpan继承的属性。    this.recognizer, //用于处理用户手势的GestureRecognizer对象。例如，可以使用TapGestureRecognizer来处理点击事件    MouseCursor? mouseCursor, //指定在鼠标悬停时显示的光标的类型    this.onEnter, //当鼠标悬停在文本范围内时调用的回调函数    this.onExit, //当鼠标离开文本范围时调用的回调函数    this.semanticsLabel, //用于辅助工具的描述，描述具有残障用户的文本    this.locale, //用于选择特定区域的字形的语言、脚本和区域的区域设置    this.spellOut, //如果为true，则应用拼写语音规则来读取文本  })

接下来通过一些例子来进一步学习Text部件。

例1

Text(  'Hello Ruth, How are you?',  textAlign: TextAlign.center,  overflow: TextOverflow.ellipsis,  style: const TextStyle(fontWeight: FontWeight.bold),)

这个例子展示了如何使用Text部件将overflow设置为TextOverflow.ellipsis来显示文本。
如果文本比可用空间短，则显示完整文本，不带省略号。效果如下：

例2

const Text.rich(  TextSpan(    text: 'Hello', // default text style    children: <TextSpan>[      TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),      TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),    ],  ),)

使用Text.rich构造函数，Text部件可以让每个单词都有不同的样式。效果如下：

Text.rich构造了一个富文本部件，当然Flutter自身也提供了对应的部件。

RichText

RichText(  {Key? key,           required InlineSpan text,  //显示的富文本内容，通常使用TextSpan或其子类来构建富文本。          TextAlign textAlign = TextAlign.start,           TextDirection? textDirection,           bool softWrap = true,           TextOverflow overflow = TextOverflow.clip,           TextScaler textScaler = TextScaler.noScaling,           int? maxLines,           Locale? locale,           StrutStyle? strutStyle,           TextWidthBasis textWidthBasis = TextWidthBasis.parent,  //测量一行或多行文本宽度的不同方法          TextHeightBehavior? textHeightBehavior,           SelectionRegistrar? selectionRegistrar,  //用于处理文本选择的SelectionRegistrar对象          Color? selectionColor    })

接下来通过一个例子，进一步理解以上属性。

// 点击手势检测器late TapGestureRecognizer tapRecognizer;@overridevoid initState() {  tapRecognizer = TapGestureRecognizer()..onTap = _handleTap;  super.initState();}/// 处理点击void _handleTap() {  // 打印  print('tapRecognizer 25');  // 设置震动效果  HapticFeedback.vibrate();}// 这里只贴图 25 的部分代码TextSpan(  text: '25',  // 设置个性化覆盖样式  style: TextStyle(    fontWeight: FontWeight.bold,    fontSize: 18,    color: Colors.red,  ),  // 设置点击检测器  recognizer: tapRecognizer,)

效果如下：

以上介绍的文本都是不可选择的，如果需要让文本可以被选中，则需要使用到SelectableText部件。

SelectableText

用于显示可选择（可复制、粘贴）文本的部件。这个部件允许用户通过文本选择操作来交互，例如复制文本到剪贴板。

SelectableText(  String data,  {Key? key,  style,  strutStyle,  textAlign,  textDirection,  locale,  textScaleFactor,  showCursor,  autofocus,  toolbarOptions,  minLines,  maxLines,  cursorWidth,  cursorHeight,  cursorRadius,  cursorColor,  selectionHeightStyle,  selectionWidthStyle,  textWidthBasis,  textHeightBehavior,  onTap,  scrollPhysics,  dragStartBehavior,  enableInteractiveSelection,  onTapDown,  onLongPress,  onLongPressMoveUpdate,  onLongPressUp,  onLongPressEnd,  onSelectionChanged,  scrollController,  scrollableKey,  keyboardAppearance,  dragCursor,  mouseCursor,  selectionControls,  buildCounter,  selectionColor,  selectionBorderColor,  scrollPadding,  dragOffsetStartBehavior,  paintCursorAboveText,  readOnly,  textSelectionDelegate,  clipBehavior})

关键参数：

• data：要显示的文本。
• style：文本的样式。
• showCursor：是否显示文本选择光标，默认为 true。
• autofocus：小部件是否自动获得焦点，默认为 false。
• minLines 和 maxLines：文本的最小和最大行数。
• cursorColor：文本选择光标的颜色。
• selectionColor：文本选择区域的背景颜色。
• enableInteractiveSelection：是否允许交互式选择（复制、粘贴等），默认为 true。
• onTap：点击文本时调用的回调函数。
• onLongPress：长按文本时调用的回调函数。
• onSelectionChanged：文本选择发生变化时调用的回调函数。

SelectableText.rich与 Text.rich 一致，显示富文本。

小结

在Flutter中，文本是应用程序中常见的 UI 元素之一，文本部件用于在应用程序中显示简单的文本。以下是对本节内容的总结：

Text ：

• Text 小部件用于显示简单的文本内容。
• 使用 style 属性可以定制文本的样式，例如字体大小、颜色、粗细等。
• 其他常见属性包括 textAlign、textDirection、softWrap、overflow 等。

RichText ：

• RichText 允许创建富文本，其中不同的文本片段可以具有不同的样式和格式。
• 使用 TextSpan 对象构建富文本内容，可以实现更复杂的文本排版。

SelectableText ：

• SelectableText 允许用户交互式选择文本，例如复制和粘贴。
• 可以通过设置 onTap、onLongPress 等回调来处理用户的交互操作。

Accessibility（可访问性）：

• 使用 semanticsLabel 属性为屏幕阅读器提供文本描述，增强可访问性。
• 合理使用 Semantics 和其他可访问性工具。

总体注意事项：

• 根据设计需求调整文本样式和属性，使其符合应用程序的外观和功能。
• 谨慎使用全局键，最好使用状态管理工具来管理状态。
• 考虑使用 CupertinoTextFormFieldRow 和 CupertinoTextField 适配 iOS 风格的文本输入。

这些部件提供了灵活而强大的文本处理工具，使得在Flutter应用程序中创建富文本和用户交互性的文本变得相对简单。通过理解和合理运用这些部件，可以有效构建出各种文本显示和交互场景。