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, ), ], )); } }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!