乐趣区

flutter-基础组件-Text

Text

基本使用

Text 用来显示单一样式的文本字符串,例如:

Text("默认文本显示"),
Text("多行文本显示效果" * 7,),
Text(
  "多行文本显示时,只显示 maxLines" * 7,
  maxLines: 2,
),
Text(
  "多行文本显示时,只显示 maxLines,多余文本通过 overflow 处理" * 7,
  overflow: TextOverflow.ellipsis,
  maxLines: 1,
),
Text(
  "文字缩放倍数",
  textScaleFactor: 1.5,
),

效果如下:

说明:

  • Text 组件可以单行或多行显示,默认情况下,当文本超过一行时会自动跨行显示。
  • maxLines:当文本跨行,页面显示的最大行数。
  • overflow:文本溢出时,多余文本的处理方式,可以配合 maxLines 使用。
  • textScaleFactor:相当于当前字体大小的缩放比例,它是设置 fontSize 属性的快捷方式。

style

style 属性用来指定文本的显示方式,例如颜色,字体,大小,背景,装饰等等:

Text(
  "这里演示 textStyle 的用法" * 6,
  style: TextStyle(
    color: Colors.red,
    fontSize: 20.0,
    height: 2.0,
    fontFamily: "MicroSoft Yahei",
    fontStyle: FontStyle.italic,
    fontWeight: FontWeight.bold,
    background: new Paint()..color = Colors.yellow,
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)
Text(
  '单行文字间隔,中文无效。How are you',
  style: TextStyle(wordSpacing: 20),
)
Text(
  '文本字与字之间间隔。How are you',
  style: TextStyle(letterSpacing: 20),
)

效果如下:

说明:

  • color:文本颜色。文本的前景色,不能与 foreground 共同设置。
  • fontSize:字体大小 (pt、sp ),默认为 14 个逻辑像素 (14pt、14sp )。
  • height:指定行高,但它并不是一个绝对值,而是一个因子,具体的行高等于 fontSize * height。在该示例中,行高为 20.0 * 2.0
  • fontFamily:使用的字体名称。
  • fontStyle:字体的显示方式,如 FontStyle.italic 为斜体。
  • 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 最粗
  • background:文本背景色。
  • decoration:绘制文本装饰

    • TextDecoration.underline:下划线
    • TextDecoration.overline:上划线
    • TextDecoration.lineThrough:删除线
    • TextDecoration.none:无(默认)
  • decorationStyle:绘制文本装饰的样式

    • TextDecorationStyle.dashed:一条虚线(短横线)
    • TextDecorationStyle.dotted:一条虚线(点)
    • TextDecorationStyle.solid:一条实线
    • TextDecorationStyle.double:两条实线
    • TextDecorationStyle.wavy:一条波浪线
  • wordSpacing:单行文字间隔,中文无效
  • letterSpacing:文本字与字之间间隔

textAlign

文本的对齐方式,可以选择左对齐、右对齐还是居中对齐:

Container(
  width: 300.0,
  child: Text(
    "这里演示 textAlign.left 的用法",
    textAlign: TextAlign.left,
  ),
),
Container(
  width: 300.0,
  child: Text(
    "这里演示 textAlign.center 的用法",
    textAlign: TextAlign.center,
  ),
),
Container(
  width: 300.0,
  child: Text(
    "这里演示 textAlign.right 的用法",
    textAlign: TextAlign.right,
  ),
),

效果如下:

说明:使用 Container 容器指定宽度,才能显示对其效果

textSpan

在上面的例子中,Text 的所有文本内容只能按同一种样式,如果我们需要对一个 Text 内容的不同部分按照不同的样式显示,这时就可以使用 TextSpan,它代表文本的一个“片段”。

Text.rich(TextSpan(children: [TextSpan(text: "Home:"),
  TextSpan(
    text: "https://flutterchina.club",
    style: TextStyle(color: Colors.blue),
  ),
  TextSpan(
    text: "请点击链接",
    style: TextStyle(
      color: Colors.red,
      fontStyle: FontStyle.italic,
    ),
  ),
]))

效果如下:

DefaultTextStyle

widget 树中,文本的样式默认是可以被继承的,因此,如果在 widget 树的某一个节点处设置一个默认的文本样式,那么该节点的子树中所有文本都会默认使用这个样式,而 DefaultTextStyle 正是用于设置默认文本样式的。

DefaultTextStyle(
  textAlign: TextAlign.center,
  style: TextStyle(
    color: Colors.red,
    fontSize: 20.0,
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Container(
        width: double.infinity,
        child: Text("这里演示 DefaultTextStyle 的用法"),
      ),
      Text("这里演示 DefaultTextStyle 的用法"),
      Text(
        "这里没有继承默认字体样式",
        style: TextStyle(
          inherit: false,
          color: Colors.grey,
        ),
      ),
    ],
  ),
));

效果如下:

退出移动版