点击空白处收起键盘
法1: FocusScope.of(context).requestFocus(FocusNode());
法2: FocusManager.instance.primaryFocus?.unfocus();
以上这两个方法可点击空白处(除了状态栏处)收起键盘,并且输入框失去焦点
SystemChannels.textInput.invokeMethod('TextInput.hide'); //收起键盘,但输入框焦点不会失去
SystemChannels.textInput.invokeMethod('TextInput.show'); //弹出键盘,但不会有输入框焦点(输入框光标不显示)
FocusNode textFocus1 = FocusNode();
textFocus1.requestFocus(); //输入框聚焦,并且弹出键盘
自动弹出键盘,可以设置TextField的autofocus属性为true
autofocus: true, //是否自动设置焦点,也就是自动打开手机键盘,定位到此控件以便输入内容;Windows端则是光标自动定位。
import 'package:flutter/cupertino.dart';
import 'package:get/get.dart';
class TextFieldController extends GetxController {
TextEditingController textController1 = TextEditingController();
FocusNode textFocus1 = FocusNode();
TextEditingController textController2 = TextEditingController();
FocusNode textFocus2 = FocusNode();
@override
void onReady() {
super.onReady();
Future.delayed(const Duration(seconds: 1), (){
SystemChannels.textInput.invokeMethod('TextInput.show');
});
}
//输入框失去焦点(失去焦点会触发收起键盘)
unFocus() {
if(textFocus1.hasFocus){
textFocus1.unfocus();
}
if(textFocus2.hasFocus){
textFocus2.unfocus();
}
}
}
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'controller/text_field_controller.dart';
class TextFieldPage extends GetView<TextFieldController> {
const TextFieldPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Get.put(TextFieldController());
return GestureDetector(
behavior: HitTestBehavior.opaque, //要设置behavior属性,不然可能点击无效
onTap: (){
FocusScope.of(context).requestFocus(FocusNode());
//FocusManager.instance.primaryFocus.unfocus();
},
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(title: const Text('TextField')),
body: Container(
margin: EdgeInsets.symmetric(horizontal: 10.w),
child: Column(children: [
TextField(
controller: controller.textController1,
focusNode: controller.textFocus1,
),
SizedBox(height: 25.w,),
TextField(
controller: controller.textController2,
focusNode: controller.textFocus2,
),
],)
),
),
);
}
}
flutter_keyboard_visibility插件 点击空白处(除了状态栏处)隐藏键盘、失去焦点
导入插件
#点击空白处隐藏键盘
flutter_keyboard_visibility: ^5.3.0
点击空白处隐藏键盘
(new) KeyboardDismissOnTap KeyboardDismissOnTap({
Key? key,
required Widget child,
bool dismissOnCapturedTaps = false,
})
获取键盘是否隐藏回调,局部刷新组件
(new) KeyboardVisibilityBuilder KeyboardVisibilityBuilder({
Key? key,
required Widget Function(BuildContext, bool) builder,
KeyboardVisibilityController? controller,
})
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
return KeyboardDismissOnTap( //点击空白处隐藏键盘
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(title: const Text('TextField')),
body: Container(
margin: EdgeInsets.symmetric(horizontal: 10.w),
child: Column(children: [
Container(
color: Colors.amber[200],
child: KeyboardVisibilityBuilder(builder: (context, visible){ //获取键盘是否隐藏回调,局部刷新组件
return Text('The keyboard is ${visible ? 'VISIBLE' : 'NOT VISIBLE'}');
},),
),
TextField(
controller: controller.textController1,
focusNode: controller.textFocus1,
),
SizedBox(height: 25.w,),
TextField(
controller: controller.textController2,
focusNode: controller.textFocus2,
),
const Spacer(),
]
),
)
)
);
弹出键盘时,渲染越界的处理
1.如果使用的是Scaffold 组件,可以设置
resizeToAvoidBottomInset:false
2.也可以 使用SingleChildScrollView来进行包裹下
new SingleChildScrollView(
child: 你的组件
)