Flutter控件——常用控件:Text

2023-10-30

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,
);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter控件——常用控件:Text 的相关文章