1.1 Text Widget
Text 用于显示简单样式文本,它包含一些控制文本显示样式的一些属性,我们可以看Text widget有哪些属性
我们可以看下例子
运行结果如下
textAlign:文本的对齐方式;可以选择左对齐、右对齐还是居中。注意,对齐的参考系是Text widget 本身。本例中虽然是指定了居中对齐,但因为 Text 文本内容宽度不足一行,Text 的宽度和文本内容长度相等,那么这时指定对齐方式是没有意义的,只有 Text 宽度大于文本内容长度时指定此属性才有意义。下面我们指定一个较长的字符串
maxLines、overflow:指定文本显示的最大行数,默认情况下,文本是自动折行的,如果指定此参数,则文本最多不会超过指定的行。如果有多余的文本,可以通过overflow来指定截断方式,默认是直接截断,本例中指定的截断方式TextOverflow.ellipsis,它会将多余文本截断后以省略符“...”表示;
textScaleFactor:代表文本相对于当前字体大小的缩放因子,相对于去设置文本的样式style属性的fontSize,它是调整字体大小的一个快捷方式
1.2 TextStyle
TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等。注意:这个是配合style一起使用的。我们可以TextStyle有哪些属性。
具体示例
运行结果
此示例只展示了 TextStyle 的部分属性,它还有一些其他属性,属性名基本都是自解释的,在此不再赘述,读者可以查阅SDK文档。值得注意的是:
height:该属性用于指定行高,但它并不是一个绝对值,而是一个因子,具体的行高等于fontSize*height。
fontFamily :由于不同平台默认支持的字体集不同,所以在手动指定字体时一定要先在不同平台测试一下。
fontSize:该属性和 Text 的textScaleFactor都用于控制字体大小。但是有两个主要区别:
fontSize可以精确指定字体大小,而textScaleFactor只能通过缩放比例来控制。
textScaleFactor主要是用于系统字体大小设置改变时对 Flutter 应用字体进行全局调整,而fontSize通常用于单个文本,字体大小不会跟随系统字体大小变化
1.3 TextSpan
在上面的例子中,Text 的所有文本内容只能按同一种样式,如果我们需要对一个 Text 内容的不同部分按照不同的样式显示,这时就可以使用TextSpan,它代表文本的一个“片段”,(最常见的就是文本当中嵌套超链接)我们看看 TextSpan 的定义:
其中style 和 text属性代表该文本片段的样式和内容。 children是一个TextSpan的数组,也就是说TextSpan可以包括其他TextSpan。而recognizer用于对该文本片段上用于手势进行识别处理。下面我们看一个效果,然后用TextSpan实现它。
上面代码中,我们通过 TextSpan 实现了一个基础文本片段和一个链接片段,然后通过RichText直接包裹一个text或者(Text.rich 方法将TextSpan 添加到 Text )中,之所以可以这样做,是因为 Text 其实就是 RichText 的一个包装,而RichText 是可以显示多种样式(富文本)的 widget。_tapRecognizer,它是点击链接后的一个处理器
1.4 DefaultTextStyle
在 Widget 树中,文本的样式默认是可以被继承的(子类文本类组件未指定具体样式时可以使用 Widget 树中父级设置的默认样式),因此,如果在 Widget 树的某一个节点处设置一个默认的文本样式,那么该节点的子树中所有文本都会默认使用这个样式,而DefaultTextStyle正是用于设置默认文本样式的。下面我们看一个例子:
运行结果
1.5 字体
可以在 Flutter 应用程序中使用不同的字体。例如,我们可能会使用设计人员创建的自定义字体,或者其他第三方的字体,如 Google Fonts (opens new window)中的字体。本节将介绍如何为 Flutter 应用配置字体,并在渲染文本时使用它们。在 Flutter 中使用字体分两步完成。首先在pubspec.yaml中声明它们,以确保它们会打包到应用程序中。然后通过TextStyle (opens new window)属性使用字体。
1.5.1 在asset中声明
要将字体文件打包到应用中,和使用其他资源一样,要先在pubspec.yaml中声明它。然后将字体文件复制到在pubspec.yaml中指定的位置,如:
1.5.2 使用字体
1.5.3 Package中的字体
要使用 Package 中定义的字体,必须提供package参数。例如,假设上面的字体声明位于my_package包中,在哪个包中使用,就声明哪个包。然后创建 TextStyle 的过程如下