在Flutter中,如何使FAB button在屏幕键盘出现时隐藏?FAB按钮在屏幕上显示键盘时覆盖其他元素。
sczxawaw1#
Widget build(context) { return Scaffold( resizeToAvoidBottomInset: false, appBar: // ... body: // ... floatingActionButton: Visibility( child: // your FloatingActionButton ), ); }
3duebb1j2#
Widget build(context) { bool iskeyboardOpen = MediaQuery.of(context).viewInsets.bottom != 0; return Scaffold( body: Container()// ... floatingActionButton: Visibility( visible: !iskeyboardOpen, child: DashboardActionButton( onTap: () { Navigator.push(context, MaterialPageRoute(builder: (c) { return const YourPage(); })).then((_) { AsyncOrderActions(store).fetchData(); }); }, svgIcon: 'send-white', ), // your FloatingActionButton ), ); }
i5desfxk3#
您可以通过使用viewInsets检查键盘可见性并基于它隐藏fab来实现它。示例:
viewInsets
import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( title: "Example", home: new FabHideOnKeyboard(), )); } class FabHideOnKeyboard extends StatefulWidget { @override _FabHideOnKeyboardState createState() => new _FabHideOnKeyboardState(); } class _FabHideOnKeyboardState extends State<FabHideOnKeyboard> { @override Widget build(BuildContext context) { final bool showFab = MediaQuery.of(context).viewInsets.bottom==0.0; return Scaffold( resizeToAvoidBottomPadding: true, body:Container( alignment: Alignment.center, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text("TextField:"), TextField() ], ), ), floatingActionButton: showFab?Icon(Icons.add):null, ); } }
7fhtutme4#
使用Visibility小部件 Package FloatingActionButton,并使用bool值控制可见性。代码段:
Visibility
FloatingActionButton
bool
Widget build(context) { bool keyboardIsOpen = MediaQuery.of(context).viewInsets.bottom != 0; return Scaffold( body: // ... floatingActionButton: Visibility( visible: !keyboardIsOpen, child: // your FloatingActionButton ), ); }
此解决方案还消除了按钮消失和出现时的动画。确保类extends StatefulWidget和您已经为其创建了状态
extends StatefulWidget
wpcxdonn5#
我希望这就是你要找的
Scaffold(resizeToAvoidBottomInset: false)
kadbb4596#
为了将来的参考,这是一个遵循https://github.com/flutter/flutter/issues/26100的基本思想的实现,但使用现有的mixin来减少怪癖和代码:
class FixedCenterDockedFabLocation extends StandardFabLocation with FabCenterOffsetX, FabDockedOffsetY { const FixedCenterDockedFabLocation(); @override String toString() => 'FloatingActionButtonLocation.fixedCenterDocked'; @override double getOffsetY( ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) { final double contentBottom = scaffoldGeometry.contentBottom; final double bottomMinInset = scaffoldGeometry.minInsets.bottom; if (bottomMinInset > 0) { // Hide if there's a keyboard return contentBottom; } return super.getOffsetY(scaffoldGeometry, adjustment); } }
然后,您可以像floatingActionButtonLocation: const FixedCenterDockedFabLocation(),一样简单地使用它(不要忘记const ;)).请随意使用此代码,没有限制或归属。
floatingActionButtonLocation: const FixedCenterDockedFabLocation(),
6条答案
按热度按时间sczxawaw1#
3duebb1j2#
i5desfxk3#
您可以通过使用
viewInsets
检查键盘可见性并基于它隐藏fab来实现它。示例:
7fhtutme4#
使用
Visibility
小部件 PackageFloatingActionButton
,并使用bool
值控制可见性。代码段:
此解决方案还消除了按钮消失和出现时的动画。
确保类
extends StatefulWidget
和您已经为其创建了状态wpcxdonn5#
我希望这就是你要找的
kadbb4596#
为了将来的参考,这是一个遵循https://github.com/flutter/flutter/issues/26100的基本思想的实现,但使用现有的mixin来减少怪癖和代码:
然后,您可以像
floatingActionButtonLocation: const FixedCenterDockedFabLocation(),
一样简单地使用它(不要忘记const ;)).请随意使用此代码,没有限制或归属。