flutter-text

本文深入解析Flutter中的Text Widget,涵盖其继承关系、构造方法、样式配置及参数详解,包括Text和Text.rich的使用场景,适合Flutter初学者及进阶开发者。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Text

1.继承关系

Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Text

2.介绍

显示“ 文本”单个样式的文本字符串小组件。

3.创建Text
方法说明
Text()构造方法创建,只能生成一种style
Text.rich()静态方法创建,能够生成多种style
RichText()与Text.rich()一样
4.构造方法源码:
/// Creates a text widget.
/// If the [style] argument is null, the text will use the style from the closest enclosing [DefaultTextStyle].
const Text(this.data, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }) : assert(data != null), textSpan = null, super(key: key);
 
  /// Creates a text widget with a [TextSpan].
  const Text.rich(this.textSpan, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }): assert(textSpan != null), data = null, super(key: key);

 const TextStyle({
    this.inherit = true,
    this.color,
    this.backgroundColor,
    this.fontSize,
    this.fontWeight,
    this.fontStyle,
    this.letterSpacing,
    this.wordSpacing,
    this.textBaseline,
    this.height,
    this.locale,
    this.foreground,
    this.background,
    this.shadows,
    this.fontFeatures,
    this.decoration,
    this.decorationColor,
    this.decorationStyle,
    this.decorationThickness,
    this.debugLabel,
    String fontFamily,
    List<String> fontFamilyFallback,
    String package,
  }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
       _fontFamilyFallback = fontFamilyFallback,
       _package = package,
       assert(inherit != null),
       assert(color == null || foreground == null, _kColorForegroundWarning),
       assert(backgroundColor == null || background == null, _kColorBackgroundWarning);

4.参数讲解:
4.1 String data

要显示的字符串

4.2 TextStyle style
属性说明
Color color文本颜色。如果指定了foreground,则此值必须为null。
TextDecoration decoration绘制文本装饰:下划线(TextDecoration.underline)上划线(TextDecoration.overline)删除线(TextDecoration.lineThrough)无(TextDecoration.none)
Color decorationColor绘制文本装饰的颜色。
TextDecorationStyle decorationStyle绘制文本装饰的样式:画一条虚线 TextDecorationStyle.dashed画一条虚线TextDecorationStyle.dotted画两条线 TextDecorationStyle.double画一条实线 TextDecorationStyle.solid画一条正弦线(波浪线) TextDecorationStyle.wavy
FontWeight fontWeight绘制文本时使用的字体粗细:FontWeight.bold 常用的字体重量比正常重。即w700 FontWeight.normal 默认字体粗细。即w400 FontWeight.w100 薄,最薄FontWeight.w200 特轻FontWeight.w300 轻FontWeight.w400 正常/普通/平原FontWeight.w500 较粗FontWeight.w600 半粗体FontWeight.w700 加粗FontWeight.w800 特粗FontWeight.w900 最粗
FontStyle fontStyle字体变体:FontStyle.italic 使用斜体FontStyle.normal 使用直立
TextBaseline textBaseline对齐文本的水平线:TextBaseline.alphabetic:文本基线是标准的字母基线TextBaseline.ideographic:文字基线是表意字基线;如果字符本身超出了alphabetic 基线,那么ideograhpic基线位置在字符本身的底部。
String fontFamily使用的字体名称(例如,Roboto)。如果字体是在包中定义的,那么它将以’packages / package_name /‘为前缀(例如’packages / cool_fonts / Roboto’)
double fontSize字体大小(pt、sp),默认为14个逻辑像素(14pt、14sp)
double letterSpacing水平字母之间的空间间隔(逻辑像素为单位)。可以使用负值来让字母更接近。
double wordSpacing单词之间添加的空间间隔(逻辑像素为单位)。可以使用负值来使单词更接近。
double height文本行与行的高度,作为字体大小的倍数(取值1~2,如1.2)
Locale locale此属性很少设置,用于选择区域特定字形的语言环境
Paint background文本背景色
Paint foreground文本的前景色,不能与color共同设置(比文本颜色color区别在Paint功能多,后续会讲解)
Color backgroundColor文本的背景色
List shadows详解:Flutter Decoration背景设定(边框、圆角、阴影、形状、渐变、背景图像等)
4.3 TextAlign textAlign

文本应如何水平对齐enum:

说明
TextAlign.center将文本对齐容器的中心。
TextAlign.end对齐容器后缘上的文本。
TextAlign.justify拉伸以结束的文本行以填充容器的宽度。即使用了decorationStyle才起效
TextAlign.left对齐容器左边缘的文本。
TextAlign.right对齐容器右边缘的文本。
TextAlign.start对齐容器前缘上的文本。
4.4 TextDirection textDirection

这个属性估计是给外国人习惯使用,
相对TextAlign中的start、end而言有用(当start使用了ltr相当于end使用了rtl,也相当于TextAlign使用了left)
对于从左到右的文本(TextDirection.ltr),文本从左向右流动;
对于从右到左的文本(TextDirection.rtl),文本从右向左流动。

4.5 Locale locale

此属性很少设置,用于选择区域特定字形的语言环境

4.6 bool softWrap

某一行中文本过长,是否需要换行。默认为true,如果为false,则文本中的字形将被定位为好像存在无限的水平空间。

4.7 TextOverflow overflow

如何处理视觉溢出:

说明
TextOverflow.clip剪切溢出的文本以修复其容器。
TextOverflow.ellipsis使用省略号表示文本已溢出。
TextOverflow.fade将溢出的文本淡化为透明
4.8 double textScaleFactor

每个逻辑像素的字体像素数
例如,如果文本比例因子为1.5,则文本将比指定的字体大小大50%。
作为textScaleFactor赋予构造函数的值。如果为null,将使用从环境MediaQuery获取的MediaQueryData.textScaleFactor 即手机的像素密度(1.0、1.5、2.0、3.0)

4.9 int maxLines

文本要跨越的可选最大行数,为1,则文本不会换行。否则,文本将被包裹在框的边缘。

4.10 String semanticsLabel

图像的语义描述,用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
talkback是一款由谷歌官方开发的系统软件,它的定位是帮助盲人或者视力有障碍的用户提供语言辅助
Voiceover功能是APPLE公司在2009年4月新推出的一种语音辅助程序

5.参考

flutter 官网
陈英有

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值