Flutter键盘弹出菜单插件keep_keyboard_popup_menu的使用
Flutter键盘弹出菜单插件keep_keyboard_popup_menu的使用
keep_keyboard_popup_menu 是一个能够在键盘打开时保持键盘不关闭的弹出菜单插件。该插件旨在解决 Issue #24843 和 Issue #50567。
如何工作？
与 PopupMenuButton 不同，后者通过向导航器推入新路由来工作，这会导致软键盘隐藏。而 keep_keyboard_popup_menu 插件通过将条目添加到 Overlay 来实现其功能，并且不会导致软键盘关闭。
快速开始
KeepKeyboardPopupMenuItem
用于替换 PopupMenuItem。它的用法类似于 ListTile。由于 PopupMenuItem 会在点击时弹出当前路由（此插件使用覆盖而不是路由），因此它无法与本插件一起使用。
KeepKeyboardPopupMenuItem(
child: Text('awa'),
onTap: () {}, // 点击事件
)
KeepKeyboardPopupMenuButton
用于替换 PopupMenuButton。尽管名称相似，但使用方式有所不同。closePopup 传递给 menuItemBuilder 以编程方式关闭弹出菜单。
KeepKeyboardPopupMenuButton(
menuItemBuilder: (context, closePopup) => [
KeepKeyboardPopupMenuItem(
child: Text('awa'),
onTap: closePopup, // 关闭菜单
),
]
)
你也可以使用 menuBuilder 属性来在弹出菜单中显示任何小部件。详情参见文档和示例。
WithKeepKeyboardPopupMenu
允许在任何小部件上打开弹出菜单。
WithKeepKeyboardPopupMenu(
menuItemBuilder: (context, closePopup) => [
KeepKeyboardPopupMenuItem(
child: Text('awa'),
onTap: closePopup, // 关闭菜单
),
],
childBuilder: (context, openPopup) => ElevatedButton(
onPressed: openPopup, // 打开菜单
child: Text('Custom Trigger'),
),
)
你还可以使用 menuBuilder 属性来自定义弹出菜单中的小部件，使用 backgroundBuilder 属性来自定义弹出菜单的背景，使用 calculatePopupPosition 属性来自定义弹出菜单的位置。详情参见文档和示例。
完整示例
以下是一个完整的示例，展示了如何使用 keep_keyboard_popup_menu 插件。
import 'package:flutter/material.dart';
import 'package:keep_keyboard_popup_menu/keep_keyboard_popup_menu.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Example',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
HomePage({Key? key}) : super(key: key);
[@override](/user/override)
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('KeepKeyboardPopupMenuButton'),
),
body: Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Flexible(
flex: 0,
child: KeepKeyboardPopupMenuButton(
menuItemBuilder: (context, closePopup) => [
KeepKeyboardPopupMenuItem(
child: Text('awa'),
onTap: closePopup,
),
KeepKeyboardPopupMenuItem(
child: Text('awa'),
onTap: closePopup,
),
KeepKeyboardPopupMenuItem(
child: Text('awa'),
onTap: closePopup,
),
],
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
autofocus: true,
decoration: InputDecoration(
filled: true,
),
),
),
),
Flexible(
flex: 0,
child: KeepKeyboardPopupMenuButton(
menuBuilder: (context, closePopup) => Container(
color: Colors.teal,
child: InkWell(
onTap: closePopup,
child: SizedBox(
width: 200,
height: 200,
child: Text(
"Custom Menu Widget",
style: TextStyle(color: Colors.white),
),
),
),
),
),
),
],
),
SizedBox(
height: 48,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
WithKeepKeyboardPopupMenu(
menuItemBuilder: (context, closePopup) => [
KeepKeyboardPopupMenuItem(
child: Text('awa'),
onTap: closePopup,
),
KeepKeyboardPopupMenuItem(
child: Text('awa'),
onTap: closePopup,
),
KeepKeyboardPopupMenuItem(
child: Text('awa'),
onTap: closePopup,
),
],
childBuilder: (context, openPopup) => Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: openPopup,
child: Text('Custom Trigger'),
),
),
),
WithKeepKeyboardPopupMenu(
menuItemBuilder: (context, closePopup) => [
KeepKeyboardPopupMenuItem(
child: Text('awa'),
onTap: closePopup,
),
KeepKeyboardPopupMenuItem(
child: Text('awa'),
onTap: closePopup,
),
KeepKeyboardPopupMenuItem(
child: Text('awa'),
onTap: closePopup,
),
],
childBuilder: (context, openPopup) => Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: openPopup,
child: Text('Custom Background'),
),
),
backgroundBuilder: (context, child) => Material(
elevation: 16,
borderRadius: BorderRadius.circular(16),
shadowColor: Colors.red,
color: Colors.grey,
child: child,
),
),
WithKeepKeyboardPopupMenu(
menuItemBuilder: (context, closePopup) => [
KeepKeyboardPopupMenuItem(
child: Text('awa'),
onTap: closePopup,
),
KeepKeyboardPopupMenuItem(
child: Text('awa'),
onTap: closePopup,
),
KeepKeyboardPopupMenuItem(
child: Text('awa'),
onTap: closePopup,
),
],
childBuilder: (context, openPopup) => Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: openPopup,
child: Text('Custom position'),
),
),
calculatePopupPosition:
(Size menuSize, Rect overlayRect, Rect buttonRect) {
return Offset(8, 8);
},
),
],
),
),
],
),
),
);
}
}
更多关于Flutter键盘弹出菜单插件keep_keyboard_popup_menu的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter键盘弹出菜单插件keep_keyboard_popup_menu的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在Flutter中，keep_keyboard_popup_menu 是一个用于在键盘弹出时保持菜单（如 PopupMenuButton）可见的插件。这对于需要在用户输入时显示额外选项的场景非常有用。以下是如何使用 keep_keyboard_popup_menu 插件的基本步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 keep_keyboard_popup_menu 插件的依赖：
dependencies:
flutter:
sdk: flutter
keep_keyboard_popup_menu: ^1.0.0 # 请检查最新版本
然后运行 flutter pub get 来获取依赖。
2. 导入插件
在你的 Dart 文件中导入 keep_keyboard_popup_menu：
import 'package:keep_keyboard_popup_menu/keep_keyboard_popup_menu.dart';
3. 使用 KeepKeyboardPopupMenu
你可以使用 KeepKeyboardPopupMenu 替换 PopupMenuButton，以确保在键盘弹出时菜单仍然可见。
以下是一个简单的示例：
import 'package:flutter/material.dart';
import 'package:keep_keyboard_popup_menu/keep_keyboard_popup_menu.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Keep Keyboard Popup Menu Example'),
),
body: Center(
child: KeepKeyboardPopupMenu(
child: TextField(
decoration: InputDecoration(
hintText: 'Type something...',
),
),
items: [
PopupMenuItem(
child: Text('Option 1'),
value: 1,
),
PopupMenuItem(
child: Text('Option 2'),
value: 2,
),
PopupMenuItem(
child: Text('Option 3'),
value: 3,
),
],
onSelected: (value) {
print('Selected: $value');
},
),
),
),
);
}
}