Flutter键盘监听弹出收回解决顶起底部按钮且不遮挡输入框问题
在Flutter中,可以使用RawKeyboardListener
来监听键盘的弹出和收回,并通过AnimationController
来实现底部按钮的顶起和恢复。以下是一个简化的代码示例:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class KeyboardAwareBottomBar extends StatefulWidget {
const KeyboardAwareBottomBar({Key? key}) : super(key: key);
@override
_KeyboardAwareBottomBarState createState() => _KeyboardAwareBottomBarState();
}
class _KeyboardAwareBottomBarState extends State<KeyboardAwareBottomBar> with SingleTickerProviderStateMixin {
// 动画控制器
late AnimationController _controller;
// 键盘高度
double _keyboardHeight = 0.0;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 300));
// 监听键盘的弹出和收回
RawKeyboard.instance.addListener(_handleKeyboardChange);
}
@override
void dispose() {
_controller.dispose();
RawKeyboard.instance.removeListener(_handleKeyboardChange);
super.dispose();
}
void _handleKeyboardChange(RawKeyEvent event) {
if (event is RawKeyboardKeyEvent) {
// 键盘弹出
if (event.data is RawKeyEventDataAndroid && event.data!.physicalKey == PhysicalKeyboardKey.hide) {
setState(() {
_keyboardHeight = 0.0;
});
}
}
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
// 输入框等其他内容
Expanded(
child: Container(
color: Colors.transparent,
// 输入框等内容
),
),
// 底部按钮
SizeTransition(
sizeFactor: _controller,
axis: Axis.vertical,
child: Container(
color: Colors.blue,
// 按钮内容
),
),
],
);
}
}
在这个示例中,我们使用RawKeyboardListener
来监听键盘的弹出和收回事件,并在_handleKeyboardChange
方法中更新键盘高度。然后,我们使用AnimationController
来控制底部按钮的动画(SizeTransition
),从而实现按钮的顶起效果。这里假设键盘弹出时,按钮会上移键盘的高度,键盘收回时,按钮恢复原位。
请注意,这个示例假定键盘弹出和收回时会有相应的事件触发,并且键盘高度可以用一个变量表示。在实际应用中,可能需要根据平台和键盘行为进行相应的调整。
评论已关闭