Flutter Text组件

Flutter Text组件

Text

基本属性

textAlign：文本对齐方式。

maxLines：文本显示最大行数。

overflow：超出文本显示方式，默认显示...。

textScaleFactor：文本缩放因子。

TextStyle属性

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

color：设置文本颜色。

background：设置文本背景颜色。

fontSize：设置字体大小。

fontFamily：设置字体名称。

height：指定行高，具体行高 = fontSize x height

decoration：文本的装饰。

decorationStyle：文本装饰的样式。

使用

const Text(
  "1.hello world",
),
const Text(
  "2.Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world ",
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
),
const Text(
  "3.Hello World",
  textScaleFactor: 1.5,
),
Text(
  "4.Hello World",
  style: TextStyle(
    color: Colors.blue,
    fontSize: 18,
    fontFamily: "Courier",
    background: Paint()..color = Colors.red,
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed,
  ),
),
const Text(
  "5.Hello World",
  textScaleFactor: 1.5,
)

TextSpan

Text中的文本内容只能使用一种样式，可以使用TextSpan按照不同内容显示不同的样式。

Text.rich(TextSpan(
  children: [
    TextSpan(
      text: "6.Hello World",
      style: TextStyle(
        color: Colors.green,
      ),
    ),
    TextSpan(
      text: "www.baidu.com",
      style: TextStyle(
        color: Colors.blue,
      ),
    ),
  ],
))

RichText(
  text: const TextSpan(children: [
    TextSpan(
      text: "7.Hello World",
      style: TextStyle(
        color: Colors.red,
      ),
    ),
    TextSpan(
      text: "www.baidu.com",
      style: TextStyle(
        color: Colors.blue,
      ),
    ),
  ]),
)

DefaultTextStyle

在Widget树中，文本的样式是可以被继承的，子级文本组建没有指定样式时，会使用父级的样式，DefaultTextStyle可以用于设置默认文本样式。

DefaultTextStyle(
  style: TextStyle(
    color: Colors.red,
    fontSize: 20,
  ),
  child: Column(
    children: [
      Text("AAA"),
      Text("BBB"),
      Text("CCC"),
    ],
  ),
)

Text & Container

Container(
  width: double.infinity,
  color: Colors.blue,
  child: const Text(
    "8.Hello World",
  ),
),
Container(
  color: Colors.green,
  width: double.infinity,
  height: 100,
  child: const Text(
    "9.Hello World",
    textAlign: TextAlign.center,
  ),
),
Container(
  color: Colors.red,
  width: double.infinity,
  alignment: Alignment.center,
  height: 100,
  child: const Text(
    "9.Hello World",
  ),
)