有没有办法在Flutter中得到一个开放键盘的高度?我尝试在bottomSheet小部件打开时按键盘的高度填充它。
bottomSheet
azpvetkf1#
通常,viewInsets提供了关于任何系统ui的数据,这些数据掩盖了flutter ui。要了解键盘的高度,您可以检查viewInsets的bottom属性,当键盘在屏幕上时,这将保持键盘的高度为零。您可以使用MediaQuery检查viewInsets,如下所示:
viewInsets
bottom
MediaQuery
MediaQuery.of(context).viewInsets.bottom
注:即使其他系统用户界面从底部遮挡了flutter用户界面,bottom属性也可能有值。希望有帮助!
33qvvth12#
MediaQuery.of(context).viewInsets解决方案 * 对我不起作用。它总是显示zero,即使键盘打开。此外,看看this answer中得票最高的评论,将其用作键盘指示符是一个坏主意。因此,这里有一个单线解决方案:
MediaQuery.of(context).viewInsets
zero
final viewInsets = EdgeInsets.fromWindowPadding(WidgetsBinding.instance.window.viewInsets,WidgetsBinding.instance.window.devicePixelRatio);
然后做任何你想做的事(例如:viewInsets.bottom是键盘高度):)
viewInsets.bottom
编辑:https://api.flutter.dev/flutter/dart-ui/FlutterView-class.html是一个很好的源代码,可以查看键盘如何影响各种填充。
7hiiyaii3#
这一个为我工作:https://pub.dev/packages/keyboard_utils包中的示例代码:
2nc8po8w4#
在复杂的小部件树MediaQuery.of(context).viewInsets.bottom的情况下,即使键盘打开,也会显示null。因此,我们必须沿着树向下改变值。我制作了一个软件包,它提供了树https://pub.dev/packages/flutter_keyboard_size中所有需要的信息欢迎使用,如果您发现错误或想要扩展功能,请添加问题https://github.com/awaik/flutter_keyboard_size/issues
null
bjp0bcyl5#
如果MediaQuery.of(context).viewInsets.bottom显示为0.0,则应该可以:
首先,进入Scaffold并设置:
Scaffold
resizeToAvoidBottomInset: false,
然后您可以通过以下方式检查键盘的高度:
MediaQuery.of(context).viewInsets.bottom,
k4ymrczo6#
如果您需要在键盘未打开的情况下获取键盘高度,您可以使用flutter_persistent_keyboard_height软件包(注意:它是我创造的)。你需要做的第一件事是用PersistentKeyboardHeightProvider Package 一个小部件,你想从它的孩子那里得到键盘的高度。如果你想从所有小部件中获取键盘高度,可以将你的应用小部件 Package 起来(可能是MaterialApp)。
PersistentKeyboardHeightProvider
MaterialApp
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Persistent Keyboard Height Example', home: const FlutterPersistentKeyboardHeightExample(), builder: (context, child) => PersistentKeyboardHeightProvider( child: child!, ), ); } }
然后,您可以使用PersistentKeyboardHeight.of(context).keyboardHeight来获得高度。
PersistentKeyboardHeight.of(context).keyboardHeight
0yycz8jy7#
在我的情况下没有工作,但我需要屏幕高度没有键盘高度和LayoutBuilder工作完美。
LayoutBuilder
LayoutBuilder( builder: (context, constraints) => Container( //maxHeight will change depending on your keyboard visible or not height:constraints.maxHeight, ), );
理论上你可以做到这一点
LayoutBuilder( builder: (context, constraints) { double keyboardHeight = MediaQuery.of(context).size.height - constrains.maxHeight; } );
lf5gs5x28#
您可以制作自己的简单小部件,它将报告键盘何时打开及其大小。Widget本身:
class KeyboardListenerWidget extends StatefulWidget { /// {@macro keyboard_listener_widget} const KeyboardListenerWidget({required this.phoneSettingsQyreService, required this.keyboardHeight, super.key}); final IPhoneSettingsQyreService phoneSettingsQyreService; final double keyboardHeight; @override State<KeyboardListenerWidget> createState() => _KeyboardListenerWidgetState(); } /// State for widget KeyboardListenerWidget class _KeyboardListenerWidgetState extends State<KeyboardListenerWidget> { @override void didUpdateWidget(KeyboardListenerWidget oldWidget) { super.didUpdateWidget(oldWidget); // Here you report that keyboard state changed widget.phoneSettingsQyreService.reportKeyboardOpened(widget.keyboardHeight); // Widget configuration changed } @override Widget build(BuildContext context) => const SizedBox.shrink(); }
IPhoneSettingsQyreService实现(这个服务是单例的,所以你可以在你的项目的根目录中创建它,然后以你喜欢的任何方式传递给你的其他小部件):
IPhoneSettingsQyreService
class PhoneSettingsQyreServiceImpl implements IPhoneSettingsQyreService { ///... /// Keyboard section: final _keyboardHeightStreamController = StreamController<double>.broadcast(); double _keyboardHeight = 0; @override double get keyboardHeight => _keyboardHeight; @override Stream<double> get keyboardHeightStream => _keyboardHeightStreamController.stream; @override void reportKeyboardOpened(double height) { _keyboardHeight = height; _keyboardHeightStreamController.add(height); } @override void close() { _keyboardHeightStreamController.close(); } }
只需像这样将KeyboardListenerWidget添加到您的应用程序的根目录中(widget.child是您的Material应用程序,带有导航器或任何您用作应用程序根目录的东西):
KeyboardListenerWidget
widget.child
@override Widget build(BuildContext context) { return Stack( children: [ KeyboardListenerWidget( phoneSettingsQyreService: phoneSettingsService, keyboardHeight: MediaQuery.of(context).viewInsets.bottom, ), widget.child, Overlay(key: _overlayKey), ], ); }
只需在其他小部件中监听keyboardHeightStream,以便在需要时重新构建它们(或使用StreamBuilder<double>)。
keyboardHeightStream
StreamBuilder<double>
8条答案
按热度按时间azpvetkf1#
通常,
viewInsets
提供了关于任何系统ui的数据,这些数据掩盖了flutter ui。要了解键盘的高度,您可以检查viewInsets
的bottom
属性,当键盘在屏幕上时,这将保持键盘的高度为零。您可以使用
MediaQuery
检查viewInsets
,如下所示:注:即使其他系统用户界面从底部遮挡了flutter用户界面,
bottom
属性也可能有值。希望有帮助!
33qvvth12#
MediaQuery.of(context).viewInsets
解决方案 * 对我不起作用。它总是显示zero
,即使键盘打开。此外,看看this answer中得票最高的评论,将其用作键盘指示符是一个坏主意。因此,这里有一个单线解决方案:
然后做任何你想做的事(例如:
viewInsets.bottom
是键盘高度):)编辑:https://api.flutter.dev/flutter/dart-ui/FlutterView-class.html是一个很好的源代码,可以查看键盘如何影响各种填充。
7hiiyaii3#
这一个为我工作:https://pub.dev/packages/keyboard_utils
包中的示例代码:
2nc8po8w4#
在复杂的小部件树
MediaQuery.of(context).viewInsets.bottom
的情况下,即使键盘打开,也会显示null
。因此,我们必须沿着树向下改变值。我制作了一个软件包,它提供了树https://pub.dev/packages/flutter_keyboard_size中所有需要的信息
欢迎使用,如果您发现错误或想要扩展功能,请添加问题https://github.com/awaik/flutter_keyboard_size/issues
bjp0bcyl5#
如果
MediaQuery.of(context).viewInsets.bottom
显示为0.0,则应该可以:首先,进入
Scaffold
并设置:然后您可以通过以下方式检查键盘的高度:
k4ymrczo6#
如果您需要在键盘未打开的情况下获取键盘高度,您可以使用flutter_persistent_keyboard_height软件包(注意:它是我创造的)。
你需要做的第一件事是用
PersistentKeyboardHeightProvider
Package 一个小部件,你想从它的孩子那里得到键盘的高度。如果你想从所有小部件中获取键盘高度,可以将你的应用小部件 Package 起来(可能是MaterialApp
)。然后,您可以使用
PersistentKeyboardHeight.of(context).keyboardHeight
来获得高度。0yycz8jy7#
在我的情况下没有工作,但我需要屏幕高度没有键盘高度和
LayoutBuilder
工作完美。理论上你可以做到这一点
lf5gs5x28#
您可以制作自己的简单小部件,它将报告键盘何时打开及其大小。Widget本身:
IPhoneSettingsQyreService
实现(这个服务是单例的,所以你可以在你的项目的根目录中创建它,然后以你喜欢的任何方式传递给你的其他小部件):只需像这样将
KeyboardListenerWidget
添加到您的应用程序的根目录中(widget.child
是您的Material应用程序,带有导航器或任何您用作应用程序根目录的东西):只需在其他小部件中监听
keyboardHeightStream
,以便在需要时重新构建它们(或使用StreamBuilder<double>
)。