[정리] 렌더링?! | Flutter 디코딩 하기

valas·2022년 1월 6일
0

플러터

목록 보기
4/7
post-thumbnail

플러터 디코딩 시리즈

렌더링?! | Flutter 디코딩 하기

플러터의 렌더링 과정

  1. 입력을 처리
  2. 애니메이션을 구동
  3. 위젯트리 빌드
  4. RenderObject 위치와 크기 레이아웃 그리기
  5. Element를 시각적으로 그리기
  6. 그려지는 순서대로 결합하기
  7. GPU에 명령을 날려서 Rasterize

1, 2 번에 변화가 있을 때 빌드를 한다.
빌드는 Element 트리를 업데이트 하고 이는 RenerOjbect 트리 업데이틀 의미한다.

RenderObject는 레이아웃과 그리기를 담당.
레이아웃 단계에서 RenderObject트리를 거쳐 제약조건을 아래로 전달한다.
하위 RenderObject는 부모 객체를 크기를 전달한다.
레이아웃 디버깅할 때 이 원리를 이해하고 순서를 알면 좋다.

레이아웃이 끝나면 그리기 시작.
그리기 끝나면 그려진 그림을 결합한다.
레이어트리에서 각 레이어의 모든 그림작업을 가진다.
레이어는 별개로 그려지기 때문에 곧 그룹화 된다.

마지막으로 엔진은 업데이트된 레이어트리를 받아 픽셀로 표현(Rasterize) 하게 된다.
불필요한 그리기가 있다면 RepaintBoundary를 써보자.

0개의 댓글