Flutter05-基础组件-文本及样式
Flutter05-基础组件-文本及样式
1.文本及样式
1.1.Text
Text 用于显示简单样式文本，它包含一些控制文本显示样式的一些属性，一个简单的例子如下：
void main(List<String> args) {
runApp(MaterialApp(
title: 'My app',
home: Scaffold(
appBar: AppBar(
title: const Text('文本及样式'),
),
body: Column(
// 交叉轴方向
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Hello world",
textAlign: TextAlign.left,
),
Text(
"Hello world! I'm Jack. " * 4,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const Text(
"Hello world",
textScaleFactor: 1.5,
),
],
),
),
));
}
运行效果如图所示：
textAlign：文本的对齐方式；可以选择左对齐、右对齐还是居中。注意，对齐的参考系是Text widget 本身。本例中虽然是指定了居中对齐，但因为 Text 文本内容宽度不足一行，Text 的宽度和文本内容长度相等，那么这时指定对齐方式是没有意义的，只有 Text 宽度大于文本内容长度时指定此属性才有意义。下面我们指定一个较长的字符串：
Text("Hello world "*6, //字符串重复六次
textAlign: TextAlign.center,
)；
运行效果如图所示：
字符串内容超过一行，Text 宽度等于屏幕宽度，第二行文本便会居中显示。
-
maxLines、overflow：指定文本显示的最大行数，默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过overflow来指定截断方式，默认是直接截断，本例中指定的截断方式TextOverflow.ellipsis，它会将多余文本截断后以省略符“...”表示；TextOverflow 的其他截断方式请参考 SDK 文档。 -
textScaleFactor：代表文本相对于当前字体大小的缩放因子，相对于去设置文本的样式style属性的fontSize，它是调整字体大小的一个快捷方式。
1.2.TextStyle
TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等。我们看一个示例：
void main(List<String> args) {
runApp(MaterialApp(
title: 'My app',
home: Scaffold(
appBar: AppBar(
title: const Text('文本及样式'),
),
body: Text(
"Hello world",
style: TextStyle(
color: Colors.blue,
fontSize: 18.0,
height: 1.2,
fontFamily: "Courier",
// Paint paint = Paint()..color = Colors.yellow;
background: Paint()..color = Colors.yellow,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed,
),
),
),
));
}
效果如图所示：
此示例只展示了 TextStyle 的部分属性，它还有一些其他属性，属性名基本都是自解释的，在此不再赘述，读者可以查阅SDK文档。值得注意的是：
-
height：该属性用于指定行高，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height。 -
fontFamily：由于不同平台默认支持的字体集不同，所以在手动指定字体时一定要先在不同平台测试一下。
fontSize：该属性和 Text 的textScaleFactor都用于控制字体大小。但是有两个主要区别：
fontSize可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制。textScaleFactor主要是用于系统字体大小设置改变时对 Flutter 应用字体进行全局调整，而fontSize通常用于单个文本，字体大小不会跟随系统字体大小变化。fontSize可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制。textScaleFactor主要是用于系统字体大小设置改变时对 Flutter 应用字体进行全局调整，而fontSize通常用于单个文本，字体大小不会跟随系统字体大小变化。
1.3.TextSpan
在上面的例子中，Text 的所有文本内容只能按同一种样式，如果我们需要对一个 Text 内容的不同部分按照不同的样式显示，这时就可以使用TextSpan，它代表文本的一个“片段”。
下面我们看一个效果，然后用TextSpan实现它。
源码：
void main(List<String> args) {
runApp(MaterialApp(
title: 'My app',
home: Scaffold(
appBar: AppBar(
title: const Text('文本及样式'),
),
body: const Text.rich(TextSpan(
children: [
TextSpan(
text: 'Home:',
),
TextSpan(
text: 'https://flutterchina.club',
style: TextStyle(
color: Colors.blue,
),
),
],
)),
),
));
}
1.4.DefaultTextStyle
在 Widget 树中，文本的样式默认是可以被继承的，因此，如果在 Widget 树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式，而DefaultTextStyle正是用于设置默认文本样式的。下面我们看一个例子：
void main(List<String> args) {
runApp(MaterialApp(
title: 'My app',
home: Scaffold(
appBar: AppBar(
title: const Text('文本及样式'),
),
body: DefaultTextStyle(
//1.设置文本默认样式
style: const TextStyle(
color: Colors.red,
fontSize: 20.0,
),
textAlign: TextAlign.start,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const <Widget>[
Text("hello world"),
Text("I am Jack"),
Text(
"I am Jack",
style: TextStyle(
inherit: false, //2.不继承默认样式
color: Colors.grey,
),
),
],
),
),
),
));
}
示例运行效果如图：
1.5.字体
可以在 Flutter 应用程序中使用不同的字体。例如，我们可能会使用设计人员创建的自定义字体，或者其他第三方的字体，如 Google Fonts中的字体。
1.5.1.在asset中声明
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
1.5.2.使用字体
void main(List<String> args) {
// 声明文本样式
const textStyle = TextStyle(
fontFamily: 'Raleway',
fontSize: 25,
);
// 使用文本样式
var buttonText = const Text(
"Use the font for this text",
style: textStyle,
);
runApp(MaterialApp(
title: 'My app',
home: Scaffold(
appBar: AppBar(
title: const Text('文本及样式'),
),
body: buttonText,
),
));
}
