Text

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

1. 基础使用

 Text( 'Hello world',)

2. 文字对齐

Text(
  'Hello world',
  textAlign: TextAlign.left,
)

2.1 文字对齐的属性

enum TextAlign {
  /// Align the text on the left edge of the container.
  left,

  /// Align the text on the right edge of the container.
  right,

  /// Align the text in the center of the container.
  center,

  /// Stretch lines of text that end with a soft line break to fill the width of
  /// the container.
  ///
  /// Lines that end with hard line breaks are aligned towards the [start] edge.
  justify,

  /// Align the text on the leading edge of the container.
  ///
  /// For left-to-right text ([TextDirection.ltr]), this is the left edge.
  ///
  /// For right-to-left text ([TextDirection.rtl]), this is the right edge.
  start,

  /// Align the text on the trailing edge of the container.
  ///
  /// For left-to-right text ([TextDirection.ltr]), this is the right edge.
  ///
  /// For right-to-left text ([TextDirection.rtl]), this is the left edge.
  end,
}

3. 通过TextStyle设置文字样式

Text(
  'Hello world',
  textAlign: TextAlign.left,
  style: TextStyle(
      fontSize: 40,
      color: Colors.red,
      height: 1.5,
      background: Paint()..color = Colors.blue,
      decoration: TextDecoration.lineThrough,
      decorationStyle: TextDecorationStyle.wavy),
),

3.1 TextStyle用于指定文本显示的样式如颜色, 字体, 粗细, 背景等

    this.inherit = true,
    this.color,
    this.backgroundColor,
    this.fontSize,
    this.fontWeight,
    this.fontStyle,
    this.letterSpacing,
    this.wordSpacing,
    this.textBaseline,
    this.height,
    this.leadingDistribution,
    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,
    this.overflow,

4. TextSpan

当一行文字, 需要显示的样式不一样, 比如登录页面的确认隐私明细的需求, 用户协议与隐私协议显示可点击的时候, 使用TextSpan

举例

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