案例概述

工具提示（Tooltip）是一种轻量级的提示方式，当用户悬停或长按时显示。本案例展示了如何创建各种工具提示效果。

核心概念

1. Tooltip 基础

Tooltip 是一个简单的组件，包装另一个 Widget 并在交互时显示提示文本。

2. 自定义样式

可以自定义工具提示的外观和行为。

3. 位置控制

可以控制工具提示相对于目标 Widget 的位置。

代码详解

示例 1：基础工具提示

class BasicTooltipExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Tooltip(
      message: '这是一个工具提示',
      child: IconButton(
        icon: const Icon(Icons.info),
        onPressed: () {},
      ),
    );
  }
}

代码解释： 这是最简单的工具提示。当用户悬停或长按时显示 message 中的文本。

示例 2：图标工具提示

class IconTooltipExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Tooltip(
          message: '保存',
          child: IconButton(
            icon: const Icon(Icons.save),
            onPressed: () {},
          ),
        ),
        Tooltip(
          message: '删除',
          child: IconButton(
            icon: const Icon(Icons.delete),
            onPressed: () {},
          ),
        ),
        Tooltip(
          message: '编辑',
          child: IconButton(
            icon: const Icon(Icons.edit),
            onPressed: () {},
          ),
        ),
      ],
    );
  }
}

代码解释： 这个示例展示了为多个图标按钮添加工具提示。

示例 3：自定义工具提示

class CustomTooltipExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Tooltip(
      message: '自定义工具提示',
      textStyle: const TextStyle(color: Colors.white, fontSize: 16),
      decoration: BoxDecoration(
        color: Colors.black87,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Container(
        padding: const EdgeInsets.all(16),
        color: Colors.blue,
        child: const Text('悬停查看提示'),
      ),
    );
  }
}

代码解释： 这个示例展示了自定义工具提示的样式。可以改变文本样式和装饰。

示例 4：多个工具提示

class MultipleTooltipsExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Tooltip(
          message: '提示 1',
          child: Container(
            padding: const EdgeInsets.all(16),
            color: Colors.blue,
            child: const Text('项目 1'),
          ),
        ),
        const SizedBox(height: 16),
        Tooltip(
          message: '提示 2',
          child: Container(
            padding: const EdgeInsets.all(16),
            color: Colors.green,
            child: const Text('项目 2'),
          ),
        ),
        const SizedBox(height: 16),
        Tooltip(
          message: '提示 3',
          child: Container(
            padding: const EdgeInsets.all(16),
            color: Colors.orange,
            child: const Text('项目 3'),
          ),
        ),
      ],
    );
  }
}

代码解释： 这个示例展示了多个工具提示。每个 Widget 都可以有自己的工具提示。

示例 5：长文本工具提示

class LongTextTooltipExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Tooltip(
      message: '这是一个较长的工具提示文本，用于展示 Tooltip 如何处理长内容。'
          '可以包含多行文本，提供更详细的说明。',
      child: Container(
        padding: const EdgeInsets.all(16),
        color: Colors.purple,
        child: const Text('悬停查看详细提示'),
      ),
    );
  }
}

代码解释： 这个示例展示了长文本工具提示。Tooltip 会自动换行显示长文本。

高级话题

1. 动态/响应式设计

根据屏幕大小调整工具提示。

2. 动画与过渡

自定义工具提示出现动画。

3. 搜索/过滤/排序

为搜索结果添加工具提示。

4. 选择与批量操作

为选择操作添加工具提示。

5. 加载与缓存

显示加载状态提示。

6. 键盘导航

支持键盘快捷键。

7. 无障碍支持

提供无障碍支持。

8. 样式自定义

自定义工具提示样式。

9. 数据持久化/导出

保存工具提示状态。

10. 单元测试与集成测试

测试工具提示功能。

PC 端适配要点

• 支持鼠标悬停
• 提供清晰的提示文本
• 自动调整位置避免超出屏幕

实际应用场景

• 按钮提示：说明按钮功能
• 图标说明：说明图标含义
• 帮助文本：提供帮助信息
• 快捷键提示：显示快捷键

扩展建议

• 学习高级提示库
• 研究性能优化
• 探索自定义动画
• 集成帮助系统

总结

工具提示是提供用户帮助的轻量级方式。通过灵活使用 Tooltip，可以创建友好的用户界面。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net