flutter開(kāi)發(fā)之點(diǎn)擊空白處收起鍵盤

點(diǎn)擊空白處收起鍵盤

法1: FocusScope.of(context).requestFocus(FocusNode());
法2: FocusManager.instance.primaryFocus?.unfocus();
以上這兩個(gè)方法可點(diǎn)擊空白處(除了狀態(tài)欄處)收起鍵盤,并且輸入框失去焦點(diǎn)

SystemChannels.textInput.invokeMethod('TextInput.hide'); //收起鍵盤,但輸入框焦點(diǎn)不會(huì)失去
SystemChannels.textInput.invokeMethod('TextInput.show'); //彈出鍵盤,但不會(huì)有輸入框焦點(diǎn)(輸入框光標(biāo)不顯示)

FocusNode textFocus1 = FocusNode();
textFocus1.requestFocus(); //輸入框聚焦,并且彈出鍵盤

自動(dòng)彈出鍵盤,可以設(shè)置TextField的autofocus屬性為true
autofocus: true, //是否自動(dòng)設(shè)置焦點(diǎn),也就是自動(dòng)打開(kāi)手機(jī)鍵盤,定位到此控件以便輸入內(nèi)容;Windows端則是光標(biāo)自動(dòng)定位。

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');
    });
  }

//輸入框失去焦點(diǎn)(失去焦點(diǎn)會(huì)觸發(fā)收起鍵盤)
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,      //要設(shè)置behavior屬性,不然可能點(diǎn)擊無(wú)效
      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插件 點(diǎn)擊空白處(除了狀態(tài)欄處)隱藏鍵盤、失去焦點(diǎn)

導(dǎo)入插件

 #點(diǎn)擊空白處隱藏鍵盤
  flutter_keyboard_visibility: ^5.3.0

點(diǎn)擊空白處隱藏鍵盤
(new) KeyboardDismissOnTap KeyboardDismissOnTap({
Key? key,
required Widget child,
bool dismissOnCapturedTaps = false,
})

獲取鍵盤是否隱藏回調(diào),局部刷新組件
(new) KeyboardVisibilityBuilder KeyboardVisibilityBuilder({
Key? key,
required Widget Function(BuildContext, bool) builder,
KeyboardVisibilityController? controller,
})

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

 return KeyboardDismissOnTap(       //點(diǎn)擊空白處隱藏鍵盤
      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){     //獲取鍵盤是否隱藏回調(diào),局部刷新組件
              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(),
          ]
        ),
      )
    )
      );

彈出鍵盤時(shí),渲染越界的處理

1.如果使用的是Scaffold 組件,可以設(shè)置
resizeToAvoidBottomInset:false
2.也可以 使用SingleChildScrollView來(lái)進(jìn)行包裹下
new SingleChildScrollView(
child: 你的組件
)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容