SuperAPI AI 工具集

shadcn_ui-tooltip

前端与建站

查看项目

更新于 10-16 04:00

技能介绍

用途 ShadTooltip 用于在 Flutter 界面中为元素添加工具提示:当元素获得键盘焦点或鼠标悬停时,弹出提示内容。适合为按钮、图标、图片等控件补充说明文字。

主要能力

  • 焦点与悬停触发:元素收到键盘焦点或鼠标悬停时显示弹窗提示。
  • 内容与触发器分离:通过 builder: (context) => ... 构建提示内容(例如 Text('Add to library')),通过 child 指定触发的子组件。

使用方式 基础用法:

ShadTooltip( builder: (context) => const Text('Add to library'), child: ShadButton.outline( child: const Text('Hover/Focus'), onPressed: () {}, ), )

悬停生效条件:悬停仅在 child 使用 ShadGestureDetector 时有效;ShadButton 及类似组件已实现该能力。

对于非交互式 child(例如 Image),需要用 ShadGestureDetector 包裹:

ShadTooltip( builder: (context) => const Text('Description'), child: ShadGestureDetector( child: Image.network('...'), ), )

适用场景

  • 为 ShadButton 等支持手势的组件添加悬停/聚焦提示。
  • 为普通组件(如图片)添加提示时,配合 ShadGestureDetector 使用。

限制

  • 悬停提示依赖 child 上的 ShadGestureDetector;普通 widget 直接作为 child 时需自行包裹,否则悬停不显示提示。
  • 关于价格、平台支持范围、性能影响等信息,资料暂未提供。