Flutter 키보드 단축키[초급편] 사용하기
이번에는
Focus와 onKeyEvent를 사용하여 Widget 키를 눌렀을 때의 처리를 실시한다.(Widget을 열지 않는 일반 화면에서 단축키, 여러 개의 키를 사용하는 단축키 등 더 복잡한 키 입력 처리에 대해서는 앞으로 [중급편] [고급편] 형식으로 처리할 수 있을까요?)
솔직히 잘 모르겠지만 대체로 움직였으니 먼저 정리해 봅시다.
이번 기사 할 수 있는 거.
열린 Widget에서 키를 눌렀을 때 처리할 수 있습니다.
아래6법 응용 프로그램에서 오른쪽 아래 플러스 버튼으로 법령 검색을 하고 법령을 추가한 뒤 조문이 표시된 구역을 두 번 클릭하면 검색 조문의 모드가 나타난다.
이 모드에서는 표시된 버튼을 사용하지 않고 숫자 키로 숫자를 입력하고, BackSpace 키로 숫자를 삭제하고, Enter 또는 Space 키로 줄 번호로 건너뛸 수 있습니다.
또한 S키를 눌러 모드를 닫을 수도 있습니다.
이 글은 이러한 버튼 입력 처리를 실현하였다.
Flutter 키보드 단축키 사용
공식 페이지 링크는 다음과 같습니다.
일본어 정보로서 아래의 글을 참고할 수 있습니다.
한마디로 버튼 입력을 받아들이려면 포커스 상태가 필요하다는 것을 이해하면 문제없다.
※ 포커스 상태는 텍스필드와 같은 autooffocus라는 인상을 주므로 이해하기 쉬울 수 있습니다.autooffocus를 지정하면 Text Field가 표시되면 Text Field에서 입력을 받아들이지만 입력을 받아들이는 상태는Focus 상태입니다.
사용법
Focus Widget
이번 보도에서 위에서 말한 바와 같이
Focus와 onKeyEvent를 사용하여 키가 눌렸을 때의 처리를 실시한다.Focus학급에 대한 공식 페이지↓사용
Focus 코드는 다음과 같습니다.Focus(
autofocus: true,
onKeyEvent: (node, event) {},
child: Widget()
)
Focus.또한 Widget이 표시될 때Focus 상태가 되도록 autooffocus를 진짜로 만듭니다.
키 입력 처리는 onKey Event에서 수행됩니다.
onKeyEvent
onKey Event는 다음과 같은 느낌입니다.
onKeyEvent: (node, event) {
if (event is KeyDownEvent) {
if (event.logicalKey == LogicalKeyboardKey.keyQ) {
//処理
return KeyEventResult.handled;
}
}
return KeyEventResult.ignored;
}
if (event is KeyDownEvent) {}이if문장은 버튼이 눌렸을 때만 처리됩니다.만약 이것이 없다면, 키가 눌렸을 때와 키가 되돌아왔을 때의 2차 처리를 진행합니다.그리고
if (event.logicalKey == LogicalKeyboardKey.keyQ) {}에서 Q 키를 눌렀을 때 처리합니다.여기에는 logicalKey를 사용하고 physicalKey도 있습니다.
logicalKey는 실제 키이고 physicalKey는 QWERTY 키보드의 특정 위치의 키입니다.
만약 버튼의 인쇄 방식에 따라 한다면 로지컬 키는 된다.
사용할 수 있는 키는 아래 공식 문서를 참조하세요.
공간 표시줄
LogicalKeyboardKey.space, 리턴 키LogicalKeyboardKey.enter처럼 사용합니다.또한 onKeyEvent에서 KeyEvent는 반환값으로 필요합니다.솔직히 잘 모르겠지만
Focus의공식 문서처럼 키가 눌린 처리된if문KeyEventResult.handled에서 온키 이벤트의 마지막 곳KeyEventResult.ignored에서 돌아왔다.사용 예
이 보도의 첫 번째로 소개된 6법 응용의 사용 예.
키를 눌렀을 때의 처리 등은 생략됩니다.
//
String s = '';
//
Focus(
autofocus: true,
onKeyEvent: (node, event) {
final key = event.logicalKey;
final keyl = key.keyLabel;
if (event is KeyDownEvent) {
if (key == LogicalKeyboardKey.space ||
key == LogicalKeyboardKey.enter ||
key == LogicalKeyboardKey.numpadEnter) {
//スペース、エンター、テンキーのエンターが押されたときの処理
return KeyEventResult.handled;
} else if (key == LogicalKeyboardKey.backspace) {
//バックスペースが押されたときの処理
return KeyEventResult.handled;
} else if (keyl.contains(RegExp(r'[0-9]'))) {
//数字キー、テンキーの数字キーが押されたときの処理
setState(() {
s += keyl[keyl.length - 1];
});
return KeyEventResult.handled;
} else if (key == LogicalKeyboardKey.keyS) {
//Sキーが押されたときの処理
Navigator.of(context).pop();
return KeyEventResult.handled;
}
}
return KeyEventResult.ignored;
},
child: //
)
//
그리고 온키 이벤트의 시작에 각각
event.logicalKey와 key.keyLabel를 key, keyl로 설정하여 코드를 약간 단축시켰다.또한 일반적인 키와 숫자 키는 서로 다른 키로 처리되기 때문에 숫자 키에서 사용할 때
LogicalKeyboardKey.numpadEnter와 같은 느낌으로 지정해야 한다.디지털 키도 마찬가지로 보통
digit0 등으로 지정할 수 있지만 디지털 키에서는 numpad0와 같은 지정이다.이번에 사용할 때는 눌린 숫자 키의 숫자를 화면에 반영하고 싶어 사용했다
keyLabel.키레이블을 사용한 디지털 키 작업 정보
우선if문장의 조건하에서
keyl.contains(RegExp(r'[0-9]')).이것은 키레이블에 0~9의 숫자가 포함되어 있는지 여부를 판정한다.
키레이블은 키로 설정된 이름의 값으로 온키 이벤트에서
event.logicalKey.keyLabel 로 얻을 수 있습니다.통상적인 숫자키의 키레이블은 원래의 숫자로 (0 또는) 얻을 수 있지만, 숫자키의 키레이블은
Numpad 0처럼 넘패드가 추가돼 있어 0~9의 포함 여부에 따라 판정된다.비슷한 이유로
keyl[keyl.length - 1]를 사용하면 눌린 키의 숫자를 얻을 수 있습니다.키레이블을 가져오는 마지막 문자입니다.
숫자 키를 사용하는 키레이블은
Numpad 0 느낌이기 때문에 마지막 문자를 얻으면 키의 숫자를 얻을 수 있다.문제는 숫자를 포함하는 기능키도 반응하지만 기능키는 이 앱에서 사용되지 않아 좋다는 점이다.기능키에 반응하지 않기 위해 키레이블에 F가 포함된 경우를 제외하고 닦아도 될까요?
총결산
따라서
Focus와 onKeyEvent를 사용하여 Widget을 열고 키를 눌렀을 때의 처리 방법을 총괄했다.다음 중급편?그렇다면 모델 등을 열지 않는 위젯을 요약해 (최초 화면 등)에서 단축키를 사용하거나 텍스필드와 같은 다른 포커스가 있는 곳에서 단축키를 사용하는 방법을 살펴본다.(단축키 사용법이라기보다는FocusNode의 설명)
중급 문장의 내용에 따라 다음과 같은 6법 응용에서 사용하는 모든 단축키 기능을 실현할 수 있을 것으로 예상된다.
(이하 6법 응용 프로그램에서 C를 누르면 단축키를 확인할 수 있다.)
Reference
이 문제에 관하여(Flutter 키보드 단축키[초급편] 사용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/enoiu/articles/b76808bf1410a8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
