Text

Text

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

属性

• textAlign：文本的对齐方式
  • 注意，对齐的参考系是 Text widget 本身。如果 Text 文本内容宽度不足一行，Text 的宽度和文本内容长度相等，那么这时指定对齐方式是没有意义的，只有 Text 宽度大于文本内容长度时指定此属性才有意义
• maxLines：文本显示的最大行数
• overflow：多余文本的截断方式
• textScaleFactor：文本相对于当前字体大小的缩放因子，相对于去设置文本的样式 styl 属性的 fontSize，它是调整字体大小的一个快捷方式

例子

Text(
  'hello world, ' * 10,
  textAlign: TextAlign.center,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
  textScaleFactor: 2.0,
)

TextStyle

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

需注意的属性

• height：指定行高，具体的行高等于 fontSize * height
• fontSize：该属性和 Text 的 textScaleFactor 都用于控制字体大小。但是有两个主要区别
  • fontSize可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制
  • textScaleFactor主要是用于系统字体大小设置改变时对 Flutter 应用字体进行全局调整，而fontSize通常用于单个文本，字体大小不会跟随系统字体大小变化

例子

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

TextSpan

对一个 Text 内容的不同部分按照不同的样式显示

const TextSpan({
  TextStyle style, // 样式
  Sting text, // 文案
  List<TextSpan> children,
  GestureRecognizer recognizer, // 对该文本片段上用于手势进行识别处理
});

例子

Text.rich(TextSpan(
  children: [
    TextSpan(text: 'Home: '),
    TextSpan(
      text: 'https://www.kingmusi.xyz',
      style: TextStyle(color: Colors.blue)
    )
  ]
))

DefaultTextStyle

在 Widget 树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式

DefaultTextStyle(
  // 设置默认文本样式
  style: TextStyle(
    color: Colors.blue,
    fontSize: 20
  ),
  child: Center(
    child: Column(
      children: [
        Text('哈哈哈哈哈哈哈'),
        Text(
          '嘻嘻嘻嘻嘻嘻嘻',
          style: TextStyle(
            inherit: false, // 不继承默认样式
            color: Colors.green
          ),
        ),
      ],
    ),
  ),
)

字体

自己的字体

1. 在 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

2. 使用

   // 声明文本样式
   const textStyle = const TextStyle(
     fontFamily: 'Raleway',
   );
   
   // 使用文本样式
   var buttonText = const Text(
     "Use the font for this text",
     style: textStyle,
   );

package 中的字体

const textStyle = const TextStyle(
  fontFamily: 'Raleway',
  package: 'my_package', //指定包名
);