文本

Text

Text 用于显示简单样式文本,它包含一些控制文本显示样式的一些属性

Text("Hello world ! " * 4,
  textAlign: TextAlign.center,
  textScaleFactor: 1.5, // 文本相对于当前字体大小的缩放因子
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);

文本样式:

Text("Hello world",
  style: TextStyle(
    color: Colors.blue,
    fontSize: 18.0,
    height: 1.2, // 行高
    fontFamily: "Courier",
    background: new Paint()..color=Colors.yellow,
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed
  ),
);

TextStyle

文字样式可以使用 TextStyle 定义

TextDecoration

TextDecoration: 文字装饰

  • TextDecoration.none 默认
  • TextDecoration.overline
  • TextDecoration.lineThrough
  • TextDecoration.underline
  • TextDecoration.combine(List<TextDecoration>) 组合多个装饰

TextDecoration.combine 可以组合多种文字装饰, 比如:

TextDecoration.combine([TextDecoration.overline, TextDecoration.underline])

TextDecorationStyle

TextDecorationStyle: 文字装饰样式

  • TextDecorationStyle.solid
  • TextDecorationStyle.dashed
  • TextDecorationStyle.dotted
  • TextDecorationStyle.double
  • TextDecorationStyle.wavy

TextSpan

TextSpan 文字片段

定义:

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

示例:

Text.rich(TextSpan(
  children: [
    TextSpan(
      text: "Home: "
    ),
    TextSpan(
      text: "https://flutterchina.club",
      style: TextStyle(
        color: Colors.blue
      ),
      recognizer: _tapRecognizer
    ),
  ]
))

默认样式的继承

使用 DefaultTextStyle 设置默认样式, 子Widget可以继承默认样式, 除非设置 inherit: false

DefaultTextStyle(
  // 1.设置文本默认样式
  style: TextStyle(
    color:Colors.red,
    fontSize: 20.0,
  ),
  textAlign: TextAlign.start,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("hello world"), // 继承默认样式
      Text("I am Jack"), // 继承默认样式
      Text("I am Jack",
        style: TextStyle(
            inherit: false, // 2.不继承默认样式
            color: Colors.grey
        ),
      ),
    ],
  ),
);

自定义字体

要使用自定义字体, 需要在pubspec.yaml中先进行声明:

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Medium.ttf
          weight: 500
        - asset: assets/fonts/Raleway-SemiBold.ttf
          weight: 600
    - family: AbrilFatface
      fonts:
        - asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf

在Widget中使用:

Text(
  "Use the font for this text",
  style: TextStyle(
    fontFamily: 'Raleway',
  ),
);

富文本

RichText 可以容纳富文本内容:

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

使用 Text.rich 可以实现相同的功能

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress