[Flutter Combat] 키보드를 숨기려면 빈 공간을 전체적으로 클릭

Lao Meng의 가이드 : 공백 을 클릭 하여 키보드 를 숨기려는 이유는 무엇 입니까? 이것이 iOS 플랫폼의 기본 동작이기 때문에 Android 플랫폼에는 기본적으로 팝업 키보드의 오른쪽 상단 모서리에 키보드를 닫는 버튼이 있으므로 빈 공간을 클릭해도 키보드가 숨겨지지 않습니다.

단일 페이지의 경우 TextField에 focusNode를 추가하면 TextField가 빈 공간을 클릭 할 때 포커스를 잃게됩니다. 구현은 다음과 같습니다.

class DismissKeyboardDemo extends StatelessWidget {
  final FocusNode focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: GestureDetector(
        onTap: () {
          focusNode.unfocus();
        },
        child: Container(
          color: Colors.transparent,
          alignment: Alignment.center,
          child: TextField(
            focusNode: focusNode,
          ),
        ),
      ),
    );
  }
}

앱의 여러 페이지에 여러 TextField가있는 경우이 메서드는 반복적 인 코드를 많이 증가 시키므로 빈 공간을 클릭하는 리스너를 전역 적으로 추가합니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      builder: (context, child) => Scaffold(
        body: GestureDetector(
          onTap: () {
            FocusScopeNode currentFocus = FocusScope.of(context);
            if (!currentFocus.hasPrimaryFocus &&
                currentFocus.focusedChild != null) {
              FocusManager.instance.primaryFocus.unfocus();
            }
          },
          child: child,
        ),
      ),
      home: DismissKeyboardDemo(),
    );
  }
}

다음과 같이 키보드를 숨길 수도 있습니다.

SystemChannels.textInput.invokeMethod('TextInput.hide');

DismissKeyboardDemo 페이지 수정 :

class DismissKeyboardDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: TextField(),
      ),
    );
  }
}

효과는 위와 동일하며 빈 공간을 클릭하여 키보드를 숨길 수도 있습니다.

와 소통하다

Laomeng Flutter 블로그 주소 (330 제어 사용) : http://laomengit.com

Flutter 교환 그룹 (WeChat : laomengit)에 가입하고 공개 계정 [Lao Meng Flutter]을 팔로우하는 것을 환영합니다.