文本 Text
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Text"), // 标题
leading: Icon(Icons.menu), // 左侧图标
actions: [Icon(Icons.settings)], // 右侧图标数组
elevation: 0.0,// 去掉阴影
centerTitle: true, // 标题居中
),
body:TextDemo()
);
}
}
class TextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
Text("Flutter 谷歌开发的一款开源,免费的,基于Dart 语言的移动 UI 框架,Android 上构建高质量的原生应用",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 30,
color: Colors.red,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.italic,
decoration: TextDecoration.lineThrough,
decorationColor: Colors.blue,
),
textAlign: TextAlign.left,
maxLines: 3,
overflow: TextOverflow.ellipsis,
textScaleFactor: 1.5, // 文字放大
),
RichText(text: TextSpan(
text: "Hello",
style:TextStyle(
fontSize: 40,
color: Colors.red
),
children: [
TextSpan(
text: "Flutter",
style: TextStyle(
fontSize: 40,
color: Colors.blue
)
)
]
))
],
);
}
}
设置自定义字体
步骤
1. 导入字体文件
2. 在 pubspec.yaml
中声明字体
3. 设置默认字体
4. 将字体用于特定 widget
1. 导入字体文件
要使用字体,你需要将字体文件导入到项目中。常见的做法是将字体文件放在项目根目录下的 fonts
或者 assets
文件夹中。
例如,如果你想要在项目中导入 Raleway 和 Roboto Mono 字体,文件夹结构会像下面这样:
awesome_app/
fonts/
Raleway-Regular.ttf
Raleway-Italic.ttf
RobotoMono-Regular.ttf
RobotoMono-Bold.ttf
2. 在 pubspec.yaml 中声明字体
flutter:
fonts:
- family: Raleway
fonts:
- asset: fonts/Raleway-Regular.ttf
- asset: fonts/Raleway-Italic.ttf
style: italic
- family: RobotoMono
fonts:
- asset: fonts/RobotoMono-Regular.ttf
- asset: fonts/RobotoMono-Bold.ttf
weight: 700
family
属性决定了字体的名称,你将会在 TextStyle
的 fontFamily
属性中用到。
asset
是字体文件对于 pubspec.yaml
文件的相对路径。这些文件包含了字体中字形的轮廓。构建应用时,这些文件将会被包含在应用程序的资源包中。
单个字体可以引用多个不同轮廓字重及风格的文件:
weight
属性指定了文件中字体轮廓的字重为 100 的整数倍,并且范围在 100 和 900 之间。这些值对应FontWeight
并能够在TextStyle
对象的FontWeight
属性上使用。style
属性指定文件中字体的轮廓是否为italic
或normal
。这些值对应FontStyle
并能够在TextStyle
对象的 fontStyle属性上使用。
3. 设置默认字体
关于如何应用这些字体,你有两种选择:将其设为默认字体,或者仅在某些特定 Widget 中使用。
如果你想要设为默认字体,请将 fontFamily
设为应用(全局)theme
的属性的一部分。提供的 fontFamily
的值必须与 pubspec.yaml 中声明的名称相匹配。
MaterialApp(
title: 'Custom Fonts',
// Set Raleway as the default app font.
theme: ThemeData(fontFamily: 'Raleway'),
home: MyHomePage(),
);
4. 将字体用于特定 Widget
如果你希望在特定 Widget(例如 Text
Widget)中使用该字体,可以通过 TextStyle
中进行指定。
在这个例子中,我们将在一个 Text
Widget 上使用 RobotoMono 字体。同样的,这里的 fontFamily 的值必须与 pubspec.yaml 中声明的值相匹配。
Text(
'Roboto Mono sample',
style: TextStyle(fontFamily: 'RobotoMono'),
);
完整样例
pubspec.yaml
name: custom_fonts
description: An example of how to use custom fonts with Flutter
dependencies:
flutter:
sdk: flutter
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
fonts:
- family: Raleway
fonts:
- asset: fonts/Raleway-Regular.ttf
- asset: fonts/Raleway-Italic.ttf
style: italic
- family: RobotoMono
fonts:
- asset: fonts/RobotoMono-Regular.ttf
- asset: fonts/RobotoMono-Bold.ttf
weight: 700
uses-material-design: true
main.dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Fonts',
// Set Raleway as the default app font.
theme: ThemeData(fontFamily: 'Raleway'),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
// The AppBar uses the app-default Raleway font.
appBar: AppBar(title: Text('Custom Fonts')),
body: Center(
// This Text widget uses the RobotoMono font.
child: Text(
'Roboto Mono sample',
style: TextStyle(fontFamily: 'RobotoMono'),
),
),
);
}
}