Flutter单击提示工具

Question

我想在单击而不是长按上显示工具提示。

有人能帮我吗？

Tooltip(
  message: e.title,
  child: Card(
    semanticContainer: true,
    child: Padding(
      padding: EdgeInsets.symmetric(
          vertical: 12,
          horizontal: 12
      ),
      child: Center(
        child: Image.network(
          e.icon,
          height: 40,
        ),
      ),
    ),
  ),
)

- Moiz Travadi

---

目前最佳答案是@pragmateek的。这是官方解决方案，因为当前的Tooltip提供了一种开箱即用的方法来实现您所需的功能。没有必要将其包装在任何其他小部件中或制作自己的Tooltip。 - Javi Marzán

Answer 1

最简单的方法是在Tooltip构造函数内使用triggerMode属性。

  Tooltip(
    message: item.description ?? '',
    triggerMode: TooltipTriggerMode.tap,
    child: Text(item.label ?? '',
        style: TextStyle(
          fontWeight: FontWeight.w500,
          fontSize: 1.7.t.toDouble(),
          color: Colors.black.withOpacity(0.6),
        )),
  )

- pragmateek

---

理想情况下，这应该可以工作。但在Flutter 2.14.2中却不能。可能是个bug？ - Prem Kumar Easwaran

我的端上也不行。Flutter 2.10.3。 - Tiny

这在Flutter 3上无法工作。 - kallis

这是使用Flutter 3工作的。 - Zhar

这在Flutter 3.10.6版本中对我来说运行良好。这应该是被接受的答案。 - undefined

Answer 2

更新: 使用triggerMode: TooltipTriggerMode.tap,替代

此解决方案已过时
作为一个选项，您可以创建一个简单的包装小部件
完整示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Home")),
      body: Center(
        child: MyTooltip(
          message: 'message',
          child: Image.network('https://picsum.photos/seed/picsum/200/300', height: 40),
        ),
      ),
    );
  }
}

class MyTooltip extends StatelessWidget {
  final Widget child;
  final String message;

  MyTooltip({@required this.message, @required this.child});

  @override
  Widget build(BuildContext context) {
    final key = GlobalKey<State<Tooltip>>();
    return Tooltip(
      key: key,
      message: message,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () => _onTap(key),
        child: child,
      ),
    );
  }

  void _onTap(GlobalKey key) {
    final dynamic tooltip = key.currentState;
    tooltip?.ensureTooltipVisible();
  }
}

- Nagual

---

在显示了提示工具之后，我添加了一个计时器来以编程方式隐藏它。Timer(Duration(milliseconds: 2500), () => tooltip?.dispose()); - Glaudson Silva

使用“.dispose()”将无法让用户重新打开工具提示。相反，请尝试使用“.deactivate()”。 - Justin Hendrickson

这不再是实际的解决方案。请参见：https://dev59.com/FVEG5IYBdhLWcg3wbtZr#69461966 - Rebar

Answer 3

final tooltipController = JustTheController();

JustTheTooltip(
            controller: tooltipController,
            triggerMode: TooltipTriggerMode.manual,
            preferredDirection: AxisDirection.up,
            content: const SizedBox(
              width: 300,
              child: Padding(
                padding: EdgeInsets.all(20),
                child: Text(
                  'This is tooltip text',
                  style: TextStyle(fontSize: 13, color: Colors.black),
                ),
              ),
            ),
            child: IconButton(
              onPressed: () {
                  tooltipController.showTooltip();
              },
              icon: const Icon(
                  Icons.stars,
                  size: 22,
                  color: AppColors.orange,
                ),
            ),
          ),

这个方法对我来说有效。

- vishnu reji