Flutter基础（前端教程①⑧-Text文本-Icon图标-Image图片）
TextSpan 负责定义富文本的结构和样式，Text.rich 负责将这种结构渲染到屏幕上，二者必须配合使用才能实现富文本效果。
用比喻来说：TextSpan 像 “富文本的设计图”，Text.rich 像 “根据设计图施工的工人”。
示例：同时使用 TextSpan 和 Text.rich
Text.rich( // TextSpan 定义富文本结构 TextSpan( text: \"用户协议：\", style: TextStyle(fontSize: 16, color: Colors.black87), children: [ TextSpan( text: \" 请阅读并同意\", style: TextStyle(color: Colors.grey), ), TextSpan( text: \" 《服务条款》\", style: TextStyle( color: Colors.blue, decoration: TextDecoration.underline, ), // 添加点击事件 recognizer: TapGestureRecognizer() ..onTap = () { print(\"点击了服务条款\"); }, ), // 嵌套图标 WidgetSpan( child: Icon(Icons.arrow_right, color: Colors.grey, size: 16), ), ], ),)让 TextSpan 定义的文本片段支持交互，比如实现 “点击文本跳转页面”“长按文本弹出菜单” 等功能，突破了普通文本只能展示、不能交互的限制。
常用的手势识别器：
TapGestureRecognizer：监听点击事件（最常用）。LongPressGestureRecognizer：监听长按事件。DoubleTapGestureRecognizer：监听双击事件。
示例：给文本添加点击事件
Text.rich( TextSpan( text: \"点击\", style: TextStyle(color: Colors.black), children: [ TextSpan( text: \"这里\", style: TextStyle( color: Colors.blue, decoration: TextDecoration.underline, // 下划线提示可点击 ), // 添加点击识别器 recognizer: TapGestureRecognizer() ..onTap = () { // 点击事件逻辑（如跳转页面、显示弹窗等） print(\"文本被点击了！\"); }, ), TextSpan(text: \"查看详情\"), ], ),)在 Flutter 中，Icon 组件用于显示图标，是展示各种矢量图标（如系统图标、自定义图标）的基础组件。它支持 Material Design 内置图标库，也可以扩展使用自定义图标字体。
Icon( Icons.favorite, // 指定图标（来自 Material Design 图标库） color: Colors.red, // 图标颜色 size: 24, // 图标大小（默认 24.0） semanticLabel: \'收藏\', // 无障碍标签（用于屏幕阅读器）)示例：使用不同样式的图标
Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Icon(Icons.home, size: 30, color: Colors.blue), // 蓝色主页图标 Icon(Icons.email, size: 28, color: Colors.green), // 绿色邮件图标 Icon(Icons.settings, size: 26, color: Colors.grey), // 灰色设置图标 ],)1. NetworkImage：加载网络图片
从网络 URL 加载图片，最常用的网络图片加载方式。
Image( image: NetworkImage(\'https://picsum.photos/200/300\'), // 网络图片地址 width: 200, height: 300, alt: \"网络示例图片\",)// 简化写法（Image 组件提供了快捷构造方法）Image.network(\'https://picsum.photos/200/300\', width: 200, height: 300, alt: \"网络示例图片\")2. AssetImage：加载本地资源图片
加载项目中 assets 目录下的本地图片（需在 pubspec.yaml 中配置）。
// 1. 先在 pubspec.yaml 中配置资源// flutter:// assets:// - images/logo.png// 2. 加载图片Image( image: AssetImage(\'images/logo.png\'), // 本地资源路径 width: 100,)// 简化写法Image.asset(\'images/logo.png\', width: 100)3. FileImage：加载本地文件图片
加载设备本地存储（如相册、下载目录）中的图片文件，需通过 File 对象指定路径。
import \'dart:io\';// 假设已获取图片文件路径File imageFile = File(\'/storage/emulated/0/Download/photo.jpg\');Image( image: FileImage(imageFile), // 本地文件 height: 200,)4. MemoryImage：加载内存中的图片数据
直接从内存中的字节数据（Uint8List）加载图片，适用于动态生成或从网络 / 文件读取后缓存到内存的图片。
import \'dart:typed_data\';// 假设已获取图片字节数据（例如从网络下载后得到的 Uint8List）Uint8List imageBytes = ...; Image( image: MemoryImage(imageBytes), // 内存中的字节数据 width: 150,)在 Flutter 中，errorBuilder 是 Image 组件的一个回调属性，用于处理图片加载失败时的显示逻辑。当图片因网络错误、路径错误、文件损坏等原因加载失败时，它会替代默认的错误提示，显示你自定义的界面。
Image.network( \'https://example.com/invalid-image.png\', // 无效的图片地址（必然加载失败） width: 200, height: 200, // 自定义错误显示 errorBuilder: (context, error, stackTrace) { // 返回一个错误状态下显示的 Widget return Container( width: 200, height: 200, color: Colors.grey[200], child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.error, color: Colors.red, size: 40), SizedBox(height: 8), Text( \'图片加载失败\', style: TextStyle(color: Colors.grey), ), ], ), ); }, alt: \"示例错误图片\",)在 Flutter 中，frameBuilder 是 Image 组件的一个回调属性，用于自定义图片加载过程中每一帧的显示效果，包括图片加载前、加载中、加载完成等阶段。它允许你在图片的不同加载状态下添加过渡动画、占位效果或其他装饰，让图片加载过程更平滑自然。
