Flutter控件——常用控件：Text

Posted 2022-06-18 wzj_what_why_how

Text

text.dart 源码：

const Text(
    String this.data,       //要显示的字符串
    
        Key? key,
        this.style,         //样式TextStyle
        this.strutStyle,
        this.textAlign,     //文本应如何水平对齐enum
        this.textDirection, //
        this.locale,
        this.softWrap,
        this.overflow,
        // textScaleFactor代表文本相对于当前字体大小的缩放因子，相对于去设置文本的样式style属性的fontSize，它是调整字体大小的一个快捷方
        //式。该属性的默认值可以通过MediaQueryData.textScaleFactor获得，如果没有MediaQuery，那么会默认值将为1.0。
        this.textScaleFactor, //主要是用于系统字体大小设置改变时对 Flutter 应用字体进行全局调整。
        this.maxLines,  //最多几行
        this.semanticsLabel,
        this.textWidthBasis,
        this.textHeightBehavior,
    
  ) : assert(
         data != null,
         'A non-null String must be provided to a Text widget.',
       ),
       textSpan = null,
       super(key: key);
       ……

---

使用Text.rich构造函数，Text小部件可以显示具有不同样式TextSpan的段落。

const Text.rich(
    InlineSpan this.textSpan, 
    Key? 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,
  ) : assert(
         textSpan != null,
         'A non-null TextSpan must be provided to a Text.rich widget.',
       ),
       data = null,
       super(key: key);

---

属性：

（一些比较容易记忆的就没有记录下来）
overflow：是用来设置文本溢出时，如何处理,它有下面几个常用的值供我们选择。

• TextOverflow.clip：直接切断，剩下的文字就没有了，感觉不太友好，体验性不好。
• TextOverflow.ellipsis:在后边显示省略号，体验性较好，这个在工作中经常使用。
• TextOverflow.fade: 溢出的部分会进行一个渐变消失的效果，当然是上下的渐变，不是左右的哦。

textDirection：相对TextAlign中的start、end而言有用（当start使用了ltr相当于end使用了rtl，也相当于TextAlign使用了left）

• TextDirection.ltr ltr从左至右，
• TextDirection.rtl rtl从右至左

softWrap： 是否自动换行（true自动换行，false单行显示，超出屏幕部分默认截断处理）
style：样式TextStyle。这个属性的内容比较多：

     const TextStyle(
        this.inherit = true,
        this.color,          //字体颜色  Color.fromARGB(225, 225, 125, 125),
        this.backgroundColor,//背景色
        this.fontSize,       //字体大小 25.0, 字体大小不会跟随系统字体大小变化。可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制。
        this.fontWeight,       //字体厚度 FontWeight.w200 特轻 梯度是100 FontWeight.w900 最粗
        this.fontStyle,       //FontStyle.italic 使用斜体 FontStyle.normal 使用直立
        this.letterSpacing,       //水平字母之间的空间间隔（逻辑像素为单位）。可以使用负值来让字母更接近。
        this.wordSpacing,       //单词之间添加的空间间隔（逻辑像素为单位）。可以使用负值来使单词更接近。
        this.textBaseline,       //对齐文本的水平线:
        this.height,       //文本行与行的高度，作为字体大小的倍数（取值1~2，如1.2）具体的行高等于fontSize*height。
        this.leadingDistribution,       //
        this.locale,       //文本的前景色，不能与color共同设置
        this.foreground,       //文本的前景色，不能与color共同设置
        this.background,       //文本背景色Paint()..color = backgroundColor
        this.shadows,       //文本的阴影
        this.fontFeatures,       //
        this.decoration,       //文字的线性装饰，比如 TextDecoration.underline 下划线， TextDecoration.lineThrough删除线
        this.decorationColor,       //文本装饰线的颜色
        this.decorationStyle,       //文本装饰线的样式，比如 TextDecorationStyle.dashed 虚线 TextDecorationStyle.solid 实线
        this.decorationThickness,       //
        this.debugLabel,       //
        String? fontFamily,       //由于不同平台默认支持的字体集不同，所以在手动指定字体时一定要先在不同平台测试一下。
        List<String>? fontFamilyFallback,       //
        String? package,       //
        this.overflow,       //
      ) ...

TextSpan：对一个 Text 内容的不同部分按照不同的样式显示，这时就可以使用TextSpan，它代表文本的一个“片段”

const TextSpan(
  TextStyle style,
  Sting text,
  List<TextSpan> children,
  GestureRecognizer recognizer,
);

其中style 和 text属性代表该文本片段的样式和内容。 children是一个TextSpan的数组，也就是说TextSpan可以包括其他TextSpan。而recognizer用于对该文本片段上用于手势进行识别处理。
eg：

Text.rich(TextSpan(
    children: [
     TextSpan(
       text: "textSpan测试: "
     ),
     TextSpan(
       text: "https://flutter.com",
       style: TextStyle(
         color: Colors.blue
       ),
       recognizer: _tapRecognizer //点击链接后的一个处理器
     ),
    ]
))

• TextSpan 实现了一个基础文本片段和一个链接片段，然后通过Text.rich 方法将TextSpan 添加到 Text 中，
• 之所以可以这样做，是因为 Text 其实就是 RichText 的一个包装，而RichText 是可以显示多种样式(富文本)的 widget。

---

字体

在pubspec.yaml中指定的位置声明：

  fonts:
    - family: Oswald-Medium
      fonts:
        - asset: fonts/Oswald-Medium.ttf
          style: italic

使用字体：

// 声明文本样式
const textStyle = const TextStyle(
  fontFamily: 'Raleway',
);

// 使用文本样式
var buttonText = const Text(
  "Use the font for this text",
  style: textStyle,
);