dart 一次点击Flutter工具提示

nuypyhwy  于 2023-09-28  发布在  Flutter
关注(0)|答案(3)|浏览(137)

我想在单击时显示工具提示,而不是在长单击时显示。
有人能帮我吗?

  1. Tooltip(
  2. message: e.title,
  3. child: Card(
  4. semanticContainer: true,
  5. child: Padding(
  6. padding: EdgeInsets.symmetric(
  7. vertical: 12,
  8. horizontal: 12
  9. ),
  10. child: Center(
  11. child: Image.network(
  12. e.icon,
  13. height: 40,
  14. ),
  15. ),
  16. ),
  17. ),
  18. )
vjrehmav

vjrehmav1#

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

  1. Tooltip(
  2. message: item.description ?? '',
  3. triggerMode: TooltipTriggerMode.tap,
  4. child: Text(item.label ?? '',
  5. style: TextStyle(
  6. fontWeight: FontWeight.w500,
  7. fontSize: 1.7.t.toDouble(),
  8. color: Colors.black.withOpacity(0.6),
  9. )),
  10. )
ttcibm8c

ttcibm8c2#

更新:使用triggerMode: TooltipTriggerMode.tap,代替
此解决方案已过时
作为一个选项,您可以创建简单的 Package 小部件
完整示例:

  1. import 'package:flutter/material.dart';
  2. void main() {
  3. runApp(MyApp());
  4. }
  5. class MyApp extends StatelessWidget {
  6. @override
  7. Widget build(BuildContext context) {
  8. return MaterialApp(home: Home());
  9. }
  10. }
  11. class Home extends StatelessWidget {
  12. @override
  13. Widget build(BuildContext context) {
  14. return Scaffold(
  15. appBar: AppBar(title: Text("Home")),
  16. body: Center(
  17. child: MyTooltip(
  18. message: 'message',
  19. child: Image.network('https://picsum.photos/seed/picsum/200/300', height: 40),
  20. ),
  21. ),
  22. );
  23. }
  24. }
  25. class MyTooltip extends StatelessWidget {
  26. final Widget child;
  27. final String message;
  28. MyTooltip({@required this.message, @required this.child});
  29. @override
  30. Widget build(BuildContext context) {
  31. final key = GlobalKey<State<Tooltip>>();
  32. return Tooltip(
  33. key: key,
  34. message: message,
  35. child: GestureDetector(
  36. behavior: HitTestBehavior.opaque,
  37. onTap: () => _onTap(key),
  38. child: child,
  39. ),
  40. );
  41. }
  42. void _onTap(GlobalKey key) {
  43. final dynamic tooltip = key.currentState;
  44. tooltip?.ensureTooltipVisible();
  45. }
  46. }
展开查看全部
uqzxnwby

uqzxnwby3#

  1. final tooltipController = JustTheController();
  2. JustTheTooltip(
  3. controller: tooltipController,
  4. triggerMode: TooltipTriggerMode.manual,
  5. preferredDirection: AxisDirection.up,
  6. content: const SizedBox(
  7. width: 300,
  8. child: Padding(
  9. padding: EdgeInsets.all(20),
  10. child: Text(
  11. 'This is tooltip text',
  12. style: TextStyle(fontSize: 13, color: Colors.black),
  13. ),
  14. ),
  15. ),
  16. child: IconButton(
  17. onPressed: () {
  18. tooltipController.showTooltip();
  19. },
  20. icon: const Icon(
  21. Icons.stars,
  22. size: 22,
  23. color: AppColors.orange,
  24. ),
  25. ),
  26. ),

这个方法对我很有效

展开查看全部

相关问题