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) {// 返回一个错误状态下显示的 Widgetreturn 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 组件的一个回调属性，用于自定义图片加载过程中每一帧的显示效果，包括图片加载前、加载中、加载完成等阶段。它允许你在图片的不同加载状态下添加过渡动画、占位效果或其他装饰，让图片加载过程更平滑自然。