BuildTip typedef

create_user: zhengzaihong email:1096877329@qq.com create_date: 2024-04-30 create_time: 14:37 describe: 自定义Tooltip提示组件 - 支持任意响应式提示内容 Enterprise-level custom Tooltip component - Supports any responsive tooltip content

✨ 功能特性 / Features: • 🎨 完全自定义 - 提示内容完全由开发者控制 • 🎈 气泡样式 - 内置气泡效果,支持箭头方向配置 • 📍 灵活定位 - 支持自定义显示位置 • 🖱️ 多种触发 - 支持悬停、点击等交互方式 • ⏱️ 延迟控制 - 可配置显示和隐藏延迟 • 🔒 固定模式 - 支持固定显示不自动隐藏 • 🎯 精确控制 - 提供Controller进行外部控制 • 🎪 丰富样式 - 支持自定义装饰、圆角、阴影等

📖 使用示例 / Usage Examples:

// 示例1: 基础Tooltip提示
// Example 1: Basic tooltip
ZTooltip(
  buildTip: () => Container(
    padding: EdgeInsets.all(8),
    decoration: BoxDecoration(
      color: Colors.black87,
      borderRadius: BorderRadius.circular(4),
    ),
    child: Text(
      '这是提示内容',
      style: TextStyle(color: Colors.white),
    ),
  ),
  child: Text('悬停查看提示'),
)

// 示例2: 自定义操作菜单
// Example 2: Custom action menu
final controller = ZToolTipController();

ZTooltip(
  color: Colors.black54,
  width: 220,
  height: 60,
  fixedTip: true,
  controller: controller,
  duration: const Duration(milliseconds: 500),
  buildTip: () => Padding(
    padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
    child: Row(
      children: [
        ...['翻译', '查询', '下载', '取消'].map((e) => GestureDetector(
          onTap: () {
            print('点击了$e');
            controller.close();
          },
          child: Row(
            children: [
              Text(e, style: TextStyle(color: Colors.white, fontSize: 16)),
              if (e != '取消')
                Container(
                  margin: EdgeInsets.only(left: 10, top: 4, right: 10),
                  color: Colors.white,
                  height: 15,
                  width: 1,
                ),
            ],
          ),
        )).toList(),
      ],
    ),
  ),
  child: const Text('自定义Tooltip组件'),
)

// 示例3: 自定义位置布局
// Example 3: Custom position layout
ZTooltip(
  buildTip: () => Container(
    padding: EdgeInsets.all(10),
    color: Colors.blue,
    child: Text('自定义位置'),
  ),
  layout: (offset, child, size) {
    return Positioned(
      left: offset.dx,
      top: offset.dy + size.height + 10,
      child: child,
    );
  },
  child: Icon(Icons.info),
)

// 示例4: 不带气泡的纯内容提示
// Example 4: Pure content tooltip without bubble
ZTooltip(
  enableBubble: false,
  buildTip: () => Card(
    child: Padding(
      padding: EdgeInsets.all(12),
      child: Text('纯内容提示'),
    ),
  ),
  child: Text('悬停显示'),
)

// 示例5: 固定显示的Tooltip
// Example 5: Fixed tooltip (won't auto hide)
ZTooltip(
  fixedTip: true,
  canOnHover: false,
  buildTip: () => Container(
    padding: EdgeInsets.all(8),
    color: Colors.orange,
    child: Text('点击显示,不会自动隐藏'),
  ),
  onTap: () {
    // 手动控制显示/隐藏
  },
  child: ElevatedButton(
    onPressed: () {},
    child: Text('点击显示'),
  ),
)

// 示例6: 使用Controller外部控制
// Example 6: External control with controller
final controller = ZToolTipController();

Column(
  children: [
    ZTooltip(
      controller: controller,
      buildTip: () => Text('提示内容'),
      child: Text('目标组件'),
    ),
    ElevatedButton(
      onPressed: () => controller.toggle(),
      child: Text('切换显示'),
    ),
  ],
)

⚠️ 注意事项 / Notes: • 提示内容通过buildTip回调自定义,完全由开发者控制 • fixedTip为true时,提示不会自动隐藏,需手动关闭 • 使用Controller可以实现外部控制显示/隐藏 • layout参数可以完全自定义提示的显示位置 • enableBubble控制是否使用气泡样式 • 气泡箭头方向通过direction参数配置 • 建议合理设置duration避免提示闪烁

Implementation

ztooltip library