Text 和 style

Text

Text用于显示简单样式文本，它包含一些控制文本显示样式的一些属性，一个简单的例子如下：

Text("Hello world",  textAlign: TextAlign.center,);Text("Hello world! I'm Jack. "*4,  maxLines: 1,  overflow: TextOverflow.ellipsis,);Text("Hello world",  textScaleFactor: 1.5,);复制代码

运行效果如下：

textAlign：文本的对齐方式；可以选择左对齐、右对齐还是居中

maxLines、overflow：指定文本显示的最大行数，默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过overflow来指定截断方式，默认是直接截断，本例中指定的截断方式TextOverflow.ellipsis，它会将多余文本截断后以省略符“...”表示；TextOverflow的其它截断方式请参考SDK文档。

textScaleFactor：代表文本相对于当前字体大小的缩放因子，相对于去设置文本的样式style属性的fontSize，它是调整字体大小的一个快捷方式。该属性的默认值可以通过MediaQueryData.textScaleFactor获得，如果没有MediaQuery，那么会默认值将为1.0。

TextStyle

TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等。我们看一个示例：

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  ),);复制代码

TextSpan

在上面的例子中，Text的所有文本内容只能按同一种样式，如果我们需要对一个Text内容的不同部分按照不同的样式显示，这时就可以使用TextSpan，它代表文本的一个“片段”。我们看看TextSpan的定义:

const TextSpan({  TextStyle style,   Sting text,  List
    
      children,  GestureRecognizer recognizer,});复制代码

其中style 和 text属性代表该文本片段的样式和内容。 children是一个TextSpan的数组，也就是说TextSpan可以包括其他TextSpan。而recognizer用于对该文本片段上用于手势进行识别处理。下面我们看一个效果，然后用TextSpan实现它。

例子：

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

DefaultTextStyle

在widget树中，文本的样式默认是可以被继承的，因此，如果在widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式，而DefaultTextStyle正是用于设置默认文本样式的。下面我们看一个例子：

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

上面代码中，我们首先设置了一个默认的文本样式，即字体为20像素(逻辑像素)、颜色为红色。然后通过DefaultTextStyle 设置给了子树Column节点处，这样一来Column的所有子孙Text默认都会继承该样式，除非Text显示指定不继承样式，如代码中注释2。

使用字体

在asset中声明

在pubspec.yaml 中声明，例子：

flutter:  fonts:    - family: Raleway      fonts:        - asset: assets/fonts/Raleway-Regular.ttf        - asset: assets/fonts/Raleway-Medium.ttf          weight: 500复制代码

如何使用字体

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

Package中的字体

要使用Package中定义的字体，必须提供package参数。例如，假设上面的字体声明位于my_package包中。然后创建TextStyle的过程如下：

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

如果在package包内部使用它自己定义的字体，也应该在创建文本样式时指定package参数，如上例所示。

一个包也可以只提供字体文件而不需要在pubspec.yaml中声明。这些文件应该存放在包的lib/文件夹中。字体文件不会自动绑定到应用程序中，应用程序可以在声明字体时有选择地使用这些字体。假设一个名为my_package的包中有一个字体文件：

lib/fonts/Raleway-Medium.ttf复制代码

然后，应用程序可以声明一个字体，如下面的示例所示：

flutter:   fonts:     - family: Raleway       fonts:         - asset: assets/fonts/Raleway-Regular.ttf         - asset: packages/my_package/fonts/Raleway-Medium.ttf           weight: 500复制代码

lib/是隐含的，所以它不应该包含在asset路径中。

在这种情况下，由于应用程序本地定义了字体，所以在创建TextStyle时可以不指定package参数：

const textStyle = const TextStyle(  fontFamily: 'Raleway',);复制代码