Flutter UI - text 系 Widget 玩转文字界面的艺术

在 Flutter 中，text 系 Widget 扮演着重要的角色，它们负责在应用程序中显示文本内容。这些 Widget 拥有丰富的属性和方法，可以帮助开发者轻松创建出美观实用的文本界面。

常规设置

最基本的 text 系 Widget 是 Text，它可以显示简单的文本内容。通过设置 text 属性，可以指定要显示的文本。

Text('Hello, world!')

除了 text 属性，Text Widget 还提供了许多其他属性，用于控制文本的样式和对齐方式。例如，可以通过设置 fontSize 属性来控制文本的大小，通过设置 fontWeight 属性来控制文本的粗细，通过设置 color 属性来控制文本的颜色，通过设置 textAlign 属性来控制文本的对齐方式。

Text(
  'Hello, world!',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
    color: Colors.red,
    textAlign: TextAlign.center,
  ),
)

加粗 - fontWeight

fontWeight 属性用于控制文本的粗细。它可以接受 FontWeight 类的枚举值，例如 FontWeight.normal、FontWeight.bold、FontWeight.w100 等。

Text(
  'Hello, world!',
  style: TextStyle(
    fontWeight: FontWeight.bold,
  ),
)

字体样式 - fontStyle

fontStyle 属性用于控制文本的样式。它可以接受 FontStyle 类的枚举值，例如 FontStyle.normal、FontStyle.italic 等。

Text(
  'Hello, world!',
  style: TextStyle(
    fontStyle: FontStyle.italic,
  ),
)

字符间距 - letterSpacing

letterSpacing 属性用于控制文本中字符之间的间距。它可以接受一个数字值，单位是像素。

Text(
  'Hello, world!',
  style: TextStyle(
    letterSpacing: 2,
  ),
)

段落间距 - wordSpacing

wordSpacing 属性用于控制文本中单词之间的间距。它可以接受一个数字值，单位是像素。

Text(
  'Hello, world!',
  style: TextStyle(
    wordSpacing: 2,
  ),
)

通过设置这些属性，开发者可以轻松创建出各种样式的文本界面。