1/4

박민준·2022년 1월 4일
0

1. FocusNode 이동시키기 배움

먼저 FocusNode 객체를 선언

  final _contentFocusNode = FocusNode();
  final _commentFocusNode = FocusNode();

그 다음 포커스 노드를 주고 싶은 TextForm에 파라미터로 넣어줌

focusNode: _contentFocusNode,

그 다음 해당 노드로 리퀘스트를 하는 메소드를 원하는 위치에서 실행시켜주면 됨. 나 같은 경우는 제출 행동시, 포커스 노드가 옮겨가도록 설정해봤음.

onFieldSubmitted: (text) {
                    FocusScope.of(context).requestFocus(_commentFocusNode);
                  },

그리고 얘네는 State가 종료되고 새로 리빌드 되어도 살아있다고 함. 그러니 꼭 죽여줘야 한다고 한다. (dispose)이 개념은 사실 잘 몰겠다.


  void dispose() {
    // TODO: implement dispose
    _titleCon.dispose();
    _contentCon.dispose();
    _contentFocusNode.dispose();
    _commentFocusNode.dispose();
    super.dispose();

  }

2.FocusNode 추가 제어

포커스노드에는 '리스너'라는 성질이 있다. 얘는 포커스 노드를 갖고 있는 위젯이 선택되거나, 선택이 해제될 때마다 리스너에 추가된 콜백함수를 실행시킨다고 한다. 아래 코드를 봐보자.

일단 원하는 포커스 노드에 추가하고 싶은 콜백한 함수를 리스너로서 추가하자.


  void initState() {
    super.initState();
    _contentFocusNode.addListener(printText);
  }

보통 이렇게 initState안에 넣어놓는 것 같다.

그리고 해당 콜백을 이렇게 정의한다면?


계속 이래 프린트되는 걸 보니, 코드 적용이 잘 된 것 같다.

이건 활용방법이 무궁무진 할 것 같다. 리스너가 포커스가 생길때, 사라질 때 둘 다 실행되니깐 한 쪽에만 실행되도록 설정하고 싶다면, if문을 추가해주면 된다.

3. Form

일단 Form의 제어는 GlobalKey라는 객체를 통해 진행한다.
빌더 밖, 위젯 클래스 내부에 GloabalKey를 인스턴스화 해주자.

final _form = GlobalKey<FormState>();

FormState라는 제너릭도 넣어야 하나봄.~

child: Form(
            key: _form,

이렇게 Form 위젯에 위의 ref를 key속성에 넣어주면 완성!
이제 해당 키를 통해 Form 위젯 내부에 TextForm같은 놈들을 다 제어할 수 있다.

지금 다뤄볼 것은 저장 제출할 때 유용하다.

_form.currentState!.save();

이 문장을 버튼의 onPressed 안에 넣어주면 어떤 일이 일어나느냐!

이래, 텍스트폼에는 onSaved라는 속성이 있죠! 이 안에 들어있는 콜백이 동시에 하나도 빠집없이 다 호출됩니다.
저 같은 경우는 미리 Diary라는 클래스를 정의하고, 각 텍스트폼의 데이터 값을 저장할 수 있는 멤버 변수도 선언을 해놨어요.


그러고 각 텍스트폼의 onSaved에
클래스의 스태틱 변수에 다 이리 들어가게 해놓으면 나중에 클래스 째로 데이터를 전송하는 데 편리할 겁니다.

저는 클래스 째로 했는데 그러지 말고 객체 인스턴스화 시켜서 진행해도 괜찮을 것 같아요!!

profile
코린이

0개의 댓글