flutter中的Text控件

 

const Text(
String this.data, {
super.key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
this.textWidthBasis,
this.textHeightBehavior,
this.selectionColor,
}) : textSpan = null;

这段代码是用于创建一个 Text 组件的构造函数，用于在 Flutter 中显示文本。下面是各个参数的含义：
-  `data` （必需）：要显示的文本内容。
-  `key` ：用于标识该组件的键。
-  `style` ：应用于文本的样式。
-  `strutStyle` ：用于垂直布局的支撑线样式。
-  `textAlign` ：文本在组件中的对齐方式。
-  `textDirection` ：文本的方向。
-  `locale` ：用于选择文本字体或样式的区域设置。
-  `softWrap` ：指定文本是否应在软换行处换行。
-  `overflow` ：指定溢出文本应如何处理。
-  `textScaleFactor` ：文本的缩放因子。
-  `maxLines` ：显示的最大行数。
-  `semanticsLabel` ：用于辅助功能的标签。
-  `textWidthBasis` ：计算文本宽度的基准。
-  `textHeightBehavior` ：确定文本高度的行为。
-  `selectionColor` ：文本选择的颜色。
在该构造函数中， `textSpan`  属性被设置为  `null` 。

 const Text.rich(
    InlineSpan this.textSpan, {
    super.key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
    this.textHeightBehavior,
    this.selectionColor,
  }) : data = null;

 

`Text.rich`构造函数创建一个具有富文本格式的`Text`小部件。它接受一个`InlineSpan`作为`textSpan`参数，表示要显示的样式化文本。

其他参数是可选的，用于自定义`Text`小部件的外观和行为：

- `key`用于标识`Text`小部件。
- `style`是应用于文本的文本样式。
- `strutStyle`是应用于文本的支撑样式。
- `textAlign`是文本在其容器内的对齐方式。
- `textDirection`是文本的方向性。
- `locale`是用于选择特定地区文本设置的区域设置。
- `softWrap`指示文本是否应在行末换行。
- `overflow`是文本超出可用空间时的溢出策略。
- `textScaleFactor`是字体大小缩放的因子。
- `maxLines`是在截断之前要显示的最大行数。
- `semanticsLabel`是用于辅助功能目的的标签。
- `textWidthBasis`是确定文本宽度的基础。
- `textHeightBehavior`是确定文本高度时应用的行为。
- `selectionColor`是文本选择高亮的颜色。

`data`参数设置为`null`，因为在`Text.rich`构造函数中不使用它。

class TextSpan extends InlineSpan implements HitTestTarget, MouseTrackerAnnotation {
  /// Creates a [TextSpan] with the given values.
  ///
  /// For the object to be useful, at least one of [text] or
  /// [children] should be set.
  const TextSpan({
    this.text,
    this.children,
    super.style,
    this.recognizer,
    MouseCursor? mouseCursor,
    this.onEnter,
    this.onExit,
    this.semanticsLabel,
    this.locale,
    this.spellOut,
  }) : mouseCursor = mouseCursor ??
         (recognizer == null ? MouseCursor.defer : SystemMouseCursors.click),
       assert(!(text == null && semanticsLabel != null));

`TextSpan`类的构造函数定义。它继承自`InlineSpan`类，并实现了`HitTestTarget`和`MouseTrackerAnnotation`接口。

构造函数接受多个可选参数，用于创建一个`TextSpan`对象：

- `text`是要显示的文本内容。
- `children`是一个包含其他`InlineSpan`对象的列表，用于创建嵌套的文本结构。
- `style`是应用于文本的样式。
- `recognizer`是用于处理文本点击事件的手势识别器。
- `mouseCursor`是鼠标指针悬停在文本上时的光标样式。
- `onEnter`是鼠标指针进入文本时的回调函数。
- `onExit`是鼠标指针离开文本时的回调函数。
- `semanticsLabel`是用于辅助功能目的的标签。
- `locale`是用于选择特定地区文本设置的区域设置。
- `spellOut`指示文本是否应该按照字母拼写的方式读出。

注意，构造函数中的参数都是可选的，但至少需要设置`text`或`children`中的一个，否则`TextSpan`对象将没有实际意义。

构造函数还包含一些断言语句，用于在创建对象时进行验证。例如，`assert(!(text == null && semanticsLabel != null))`断言确保如果`text`为`null`，则`semanticsLabel`也必须为`null`，以避免出现不一致的情况。

构造函数中的最后一行代码用于设置`mouseCursor`的默认值。如果没有提供`mouseCursor`参数，并且`recognizer`为空，则`mouseCursor`将被设置为`MouseCursor.defer`；否则，将使用`SystemMouseCursors.click`作为默认值。

总之，`TextSpan`构造函数用于创建一个具有样式和交互功能的文本片段。

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';


void main() {
  runApp(MaterialApp(
    home: KeyboardApp(),
  ));
}

class KeyboardApp extends StatefulWidget {
  @override
  _KeyboardAppState createState() => _KeyboardAppState();
}

class _KeyboardAppState extends State<KeyboardApp> {
  String keyResult = ''; // 保存按键结果的变量

  @override
  Widget build(BuildContext context) {
   return Text.rich(
      TextSpan(
        text: 'Hello ',
        style: TextStyle(color: Colors.black),
        children: [
          WidgetSpan(
            child: Icon(Icons.favorite, color: Colors.red),
          ),
          TextSpan(
            text: 'world',
            style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
          ),

          TextSpan(
            text: '!',
            style: TextStyle(color: Colors.red),
            recognizer: TapGestureRecognizer()..onTap = () {
              print('Text tapped!');
            },
          ),

        ],
      ),
    );
  }
}

在上面的示例中，我们创建了一个包含多个TextSpan的富文本。第一个TextSpan显示了"Hello "文本，并应用了黑色的文本颜色。第二个TextSpan显示了"world"文本，并应用了蓝色的文本颜色和粗体字体样式。第三个TextSpan显示了"!"文本，并应用了红色的文本颜色。它还附带了一个手势识别器，当用户点击该文本时，会打印一条消息。