Flutter 如何移除Drawer抽屉图标悬停时的Tooltip提示文本
Flutter 移除Drawer抽屉图标默认悬停提示方案
两种可直接落地的实现方式,均不会出现布局重叠问题:
方案1:手动替换右侧抽屉按钮(推荐,局部生效不影响全局)
之前手动添加按钮出现布局重叠,是因为按钮没有放置在AppBar的actions区域——AppBar原生布局规则为leading居左、actions序列居右排列,天然符合Logo在左、抽屉按钮在右的需求,不会产生重叠。
实现逻辑:使用系统自带的EndDrawerButton组件放在actions区域,系统检测到该组件后不会自动生成多余的抽屉按钮,直接将tooltip设为空字符串即可移除提示。
修改后的核心代码(基于原有代码调整,其余逻辑不变):
class MyMobileBody extends StatelessWidget { const MyMobileBody({Key? key}) : super(key: key); @override Widget build(BuildContext context) { final currentWidth = MediaQuery.of(context).size.width; return Scaffold( appBar: AppBar( leading: Padding( padding: EdgeInsets.fromLTRB(16.0, 0, 0, 0), child: IconButton( splashColor: Colors.transparent, highlightColor: Colors.transparent, icon: Image.asset("assets/Logo/Logo-DarkMode-Transparent.png"), iconSize: 32, padding: EdgeInsets.zero, onPressed: () { // 原有Logo点击逻辑保留 }), ), // 新增右侧抽屉按钮,居右排列不与左侧Logo重叠 actions: [ Padding( padding: const EdgeInsets.only(right: 16.0), child: EndDrawerButton( // 核心配置:tooltip设为空字符串,悬停无任何提示 tooltip: '', style: IconButton.styleFrom( splashFactory: NoSplash.splashFactory, highlightColor: Colors.transparent, ), onPressed: () { // 调用系统方法打开右侧抽屉 Scaffold.of(context).openEndDrawer(); }, ), ) ], ), endDrawer: mobileDrawer(), body: const Center( child: Text( "COMING SOON!", style: TextStyle( fontSize: 70, color: Colors.white, ), textAlign: TextAlign.center, ), )); } }
方案2:全局覆写本地化配置(全局生效,无需修改单页面AppBar代码)
之前直接覆写openAppDrawerTooltip不生效,是因为该属性属于MaterialLocalizations类,需要在应用本地化层配置,而非在普通页面Widget中直接override。如果需要全局移除所有页面的抽屉默认提示,可通过如下方式实现:
- 自定义本地化委托,将抽屉提示文本覆写为空字符串
// 自定义无提示的Material本地化类 class NoDrawerTooltipLocalizations extends DefaultMaterialLocalizations { @override String get openAppDrawerTooltip => ''; } // 对应本地化委托 class NoDrawerTooltipDelegate extends LocalizationsDelegate<MaterialLocalizations> { const NoDrawerTooltipDelegate(); @override bool isSupported(Locale locale) => true; @override Future<MaterialLocalizations> load(Locale locale) async => NoDrawerTooltipLocalizations(); @override bool shouldReload(covariant LocalizationsDelegate<MaterialLocalizations> old) => false; }
- 在应用入口
MaterialApp中注册该委托
MaterialApp( // 其余主题、路由等配置保持不变 localizationsDelegates: const [ NoDrawerTooltipDelegate(), GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], )
提示:如果应用本身接入了多语言,只需要在对应语言的MaterialLocalizations实现类中覆写
openAppDrawerTooltip返回空字符串即可,无需新增单独的委托类。
内容的提问来源于stack exchange,提问作者dan
相关产品推荐
相关产品推荐

