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,
        ),
      ),
    ],
  ),
));

效果如下：