Flutter 基础 widgets -- Text
Text widget
Text 组件可以用来在应用内创建带样式的文本，只能有一个 style 属性
style（文本样式）-- TextStyle 类型
（1）、backgroundColor（文本的背景颜色）-- Color 或 Colors 类型
（2）、color（文本颜色）-- Color 或 Colors 类型
（3）、textDecoration（文本修饰）-- TextDecoration 类型，取值如：underline, lineThrough
（4）、fontSize（文本大小）-- double 类型
（5）、fontWeight（字体粗细）-- FontWeight 类型
（6）、fontStyle（字体样式）-- FontStyle 类型
（7）、letterSpacing（字符间距）-- double 类型，负值减少间距
（8）、wordSpacing（单词间距）-- double 类型，负值减少间距
（9）、overFlow（文本溢出）-- TextOverflow 类型
textDirection（文本方向）-- TextDecoration 类型
textAlign（文本对齐）-- TextAlign 类型
overFlow（文本溢出）-- TextOverflow 类型
maxLines（指定显示的行数）-- int 类型，文本最多可展示的行数，超过部分的展示方式取决于 overflow 的取值
textScaleFactor（字体缩放）-- double 类型，负数缩小
import 'package:flutter/material.dart'; class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Text 组件'), leading: const Icon(Icons.menu), actions: const [Icon(Icons.settings)], ), body: const TextDemo(), ); } } class TextDemo extends StatelessWidget { const TextDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Column( children: const [ Text( 'The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed.', style: TextStyle( backgroundColor: Color.fromRGBO(255, 0, 0, 1.0), color: Colors.amber, decoration: TextDecoration.lineThrough, decorationColor: Colors.black, fontSize: 40, fontWeight: FontWeight.w600, fontStyle: FontStyle.italic, letterSpacing: 5, wordSpacing: 10, // overflow: TextOverflow.ellipsis, overflow: TextOverflow.visible, ), textDirection: TextDirection.ltr, textAlign: TextAlign.left, maxLines: 5, overflow: TextOverflow.ellipsis, textScaleFactor: 1.5, ), ], ); } }
RichText 和 TextSpan
使用 Text.rich 构造函数 和 TextSpan 组件，Text 组件可以展示不同样式的段落
class TextDemo extends StatelessWidget { const TextDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Column( children: const [ Text.rich(TextSpan( text: 'Hello', // 默认样式 style: TextStyle( fontSize: 30, color: Colors.purpleAccent, ), children: <TextSpan>[ TextSpan( text: 'beautiful', style: TextStyle( fontSize: 40, color: Colors.pink, ), ), TextSpan( text: 'world', style: TextStyle( fontSize: 50, color: Colors.lightGreen, ), ) ], )) ], ); } }
自定义字体
Flutter 可以很方便的使用自定义字体，不仅能够将其用于整个应用里，还可以用在某个单独的 widget 中。
方法一：下载字体
使用步骤：
（1）、下载并导入字体，通常会将字体文件放在项目根目录下的 fonts 或 assets 文件夹中。Flutter 只支持 .ttf 和 .otf 两种字体格式
（2）、在 pubspec.yaml 中声明字体
- family：决定了字体的名称，将会在 TextStyle 的 fontFamily 属性中用到
- asset：字体文件对于 pubspec.yaml 文件的相对路径
- weight：指定了文件中字体轮廓的字重为 100 的整数倍，范围在 100 和 900 之间
注意：此处的 weight 属性不会覆盖字体的实际粗细，需要通过 TextStyle 的 fontWeight 属性来指定
- style：指定文件中字体的轮廓是否为 italic 或 normal，如需修改字体的实际样式，也需要通过 TextStyle 的 fontStyle 属性来指定
fonts: - family: TeenPoem fonts: - asset: fonts/Teen-Poem/Teen-Poem.otf - asset: fonts/Teen-Poem/Teen-Poem.ttf weight: 300 style: italic
为某个特定的 widget 设置自定义字体
import '01_basic/basic_05_font.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const MaterialApp( title: "Flutter Demo", home: Home(), debugShowCheckedModeBanner: false, ); } }
import 'package:flutter/material.dart'; class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Fonts'), backgroundColor: Colors.purple, ), body: const Center( child: Text('Custom Font', style: TextStyle( fontSize: 50, fontFamily: 'TeenPoem', )), )); } }
为整个应用设置默认的自定义字体
import '01_basic/basic_05_font.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: "Flutter Demo", // 为整个应用设置默认的自定义字体 theme: ThemeData(fontFamily: 'TeenPoem'), home: const Home(), debugShowCheckedModeBanner: false, ); } }
方法二：安装 google_fonts 依赖
由于众所周知的原因无法访问 https://fonts.google.com/，想要使用其提供的字体，可以通过安装 google_fonts 依赖然后引包
使用步骤：
（1）、安装依赖：flutter pub add google_fonts
（2）、引包
import 'package:google_fonts/google_fonts.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { final textTheme = Theme.of(context).textTheme; return MaterialApp( title: "Flutter Demo", // 为整个应用设置默认的自定义字体 theme: ThemeData( textTheme: GoogleFonts.acmeTextTheme(textTheme), ), home: const Home(), debugShowCheckedModeBanner: false, ); } }
Themes Widget
使用 Themes 统一颜色和字体风格
通过定义 Theme，我们可以更好地复用颜色和字体样式，从而让整个 app 的设计看起来更一致。
全局 Theme 会在整个 app 范围内生效，而局部 Theme 只作用于特定元素，两者的区别只在于，全局 Theme 定义在了 app 的root处而已
定义全局 theme
全局 Theme 会影响整个 app 的颜色和字体样式，MaterialApp 已经事先预设了一个全局的 Theme Widget，只需要向 MaterialApp 构造器传入 ThemeData 即可。
如果没有放置 Theme，Flutter 将会使用预设的样式。
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: "Flutter Demo", theme: ThemeData( // 修改默认的亮度和颜色 brightness: Brightness.dark, primaryColor: Colors.lightBlue[800], // 自定义默认的字体 fontFamily: 'Georgia', // 定义一个默认的 TextTheme，可以直接提供给组件使用 textTheme: const TextTheme( headline1: TextStyle( fontSize: 72.0, fontWeight: FontWeight.bold, color: Colors.purpleAccent, ), ), ), home: const Home(), debugShowCheckedModeBanner: false, ); } }
使用定义好的 Theme
通过调用 Theme.of(context) 查询 widget 树，并返回其中最近的 Theme，它会优先返回我们之前定义过的一个独立的 Theme，如果找不到，就会返回全局的 Theme
import 'package:flutter/material.dart'; class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('ThemeDemo'), ), body: Column( children: [ Text( 'Hello Flutter', // 使用定义好的 Theme style: Theme.of(context).textTheme.headline1, ), ], )); } }
