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 定义的文本片段支持交互，比如实现 “点击文本跳转页面”“长按文本弹出菜单” 等功能，突破了普通文本只能展示、不能交互的限制。

常用的手势识别器：

1. TapGestureRecognizer：监听点击事件（最常用）。
2. LongPressGestureRecognizer：监听长按事件。
3. 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 组件的一个回调属性，用于自定义图片加载过程中每一帧的显示效果，包括图片加载前、加载中、加载完成等阶段。它允许你在图片的不同加载状态下添加过渡动画、占位效果或其他装饰，让图片加载过程更平滑自然。