我想在单击时显示工具提示,而不是在长单击时显示。有人能帮我吗?
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, ), ), ), ),)
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,
)
vjrehmav1#
最简单的方法是在Tooltip构造函数中使用triggerMode属性。
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), )), )
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),
)),
ttcibm8c2#
更新:使用triggerMode: TooltipTriggerMode.tap,代替此解决方案已过时作为一个选项,您可以创建简单的 Package 小部件完整示例:
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(); }}
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 {
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});
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();
uqzxnwby3#
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, ), ), ),
final tooltipController = JustTheController();
JustTheTooltip(
controller: tooltipController,
triggerMode: TooltipTriggerMode.manual,
preferredDirection: AxisDirection.up,
content: const SizedBox(
width: 300,
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,
这个方法对我很有效
3条答案
按热度按时间vjrehmav1#
最简单的方法是在Tooltip构造函数中使用
triggerMode
属性。ttcibm8c2#
更新:使用
triggerMode: TooltipTriggerMode.tap,
代替此解决方案已过时
作为一个选项,您可以创建简单的 Package 小部件
完整示例:
uqzxnwby3#
这个方法对我很有效