FocusScope

  • Focus와 비슷하지만 하위 항목의 범위 역할을하여
    범위가 지정된 컨트롤러 포커스 통과를 제한합니다.
  • Focus와 마찬가지로 focus가 주어지거나 Widget에서 제거될때 onFocusChange로 알람을 받을 수 있습니다.
  • onKeyargument를 사용하면 this node 또는 포커스잡힌 자식 노드를 중 하나 가 호출될 때 key event handler 명세서를 볼 수 있다.
  • FocusScopeNode 를 관리한다는 것은 생명주기를 관리하고 포커스 변화를 listening 하고 포커스 계층구조와 위젯 계층구조를 sync상태로 유지하는 것을 의미합니다.
  • FocusScope위젯을 사용하지않고 직접수행해야하는 경우 FocusScopeNode를 참조하세요.


Code

선언 코드

class _TodoPageState extends State<TodoPage> {
  final _focusNode = FocusScopeNode();
  
  ...
  
  
  void dispose() {
    _focusNode.dispose();
    _addBtnNode.dispose();
    for (var contr in _textControllers) {
      contr.dispose();
    }
    super.dispose();
  }
  
  
  Widget build(BuildContext context) {
  return FocusScope(
          node: _focusNode,
          child: Scaffold(
          ...
          

사용 코드

사용할 때 다음과 같이 다음 focus를 자동으로 찾아서 포커싱역할

onEditingComplete: () => 조건
  ? _focusNode.nextFocus()
  : _focusNode.unfocus()




FocusScopeNode

  • 하위항목에 focus를 둔 마지막 focus를 둔 FocusNode를 기억하고 FocusNode.nextFocus, FocusNode.previousFocus, 또는FocusNode.focusInDirection이 FocusNode에서 호출될 때 해당 포커스를 다음,이전 노드 또는 특정방향으로 노드를 이동시킬 수 있습니다.
  • 포커스를 이동할라면 of메소드를 통해 FocusNode를 가져와 FocusNode에서 메소드를 사용하세요.
    • focus traversal order에서 다음노드로 이동할려면 Focus.of(context).nextFocus()
    • 위젯의 초점을 해제할려면 Focus.of(context).unfocus()


Code

선언 코드

class _TodoPageState extends State<TodoPage> {
  final _focusNode = FocusScopeNode();
  final _addBtnNode = FocusNode();
  
  ...
  
  
  void dispose() {
    _focusNode.dispose();
    _addBtnNode.dispose();
    for (var contr in _textControllers) {
      contr.dispose();
    }
    super.dispose();
  }
  
  
  Widget build(BuildContext context) {
  return FocusScope(
          node: _focusNode,
          child: Scaffold(
          
          ...
          
            floatingActionButton: FloatingActionButton(
              focusNode: _addBtnNode,
              onPressed: (){},
              child: Icon(Icons.add),
            ),
          

사용 코드

사용할 때 다음과 같이 수동 focusNode를 지정해주고 req를 요청해 찾아서 포커싱역할하게끔 사용

onEditingComplete: () => 조건
  ? _focusNode.requestFocus(_addBtnNode),
  : _focusNode.unfocus()




cf

profile
𝙸 𝚊𝚖 𝚊 𝚌𝚞𝚛𝚒𝚘𝚞𝚜 𝚍𝚎𝚟𝚎𝚕𝚘𝚙𝚎𝚛 𝚠𝚑𝚘 𝚎𝚗𝚓𝚘𝚢𝚜 𝚍𝚎𝚏𝚒𝚗𝚒𝚗𝚐 𝚊 𝚙𝚛𝚘𝚋𝚕𝚎𝚖. 🇰🇷👩🏻‍💻

0개의 댓글