How Flutter Works: The RenderObject #DecodingFlutter
- RenderObject는 Flutter UI의 핵심 구성 요소로, 접근성, 레이아웃, 페인팅, 히트 테스트 등 다양한 중요한 역할을 수행합니다. 🏗️
- 대부분의 RenderObject는 2D 좌표계를 도입하는 RenderBox를 서브클래스하며, 이는 Flutter 렌더링의 기본이 됩니다. 📦
- RenderObject의 4가지 주요 메서드는 레이아웃(크기 결정), 페인트(그래픽 작업 큐), 히트 테스트(사용자 상호작용 감지), 시맨틱스(접근성 정보 제공)입니다. 🛠️
- Flutter의 핵심 레이아웃 원칙은 "제약 조건은 내려가고, 크기는 올라오며, 부모가 위치를 설정한다"로, RenderObject 간의 상호작용을 설명합니다. 📏
- 레이아웃 메서드는 부모로부터 받은 제약 조건 내에서 자신의 크기를 결정하고, 이 크기를
size 속성에 저장합니다. 📐
- 페인트 메서드는
Canvas 객체에 그리기 작업을 기록하지만, 실제 픽셀 버퍼를 생성하지 않고 Impeller/Skia가 나중에 처리할 개념을 저장합니다. 🖼️
- 히트 테스트는 RenderObject만이 자신의 위치와 크기를 알기 때문에, 사용자의 터치/클릭 좌표가 자신의 경계 내에 있는지 확인하여 상호작용을 처리합니다. 🎯
- 시맨틱스 메서드는
SemanticsObject를 채워 스크린 리더와 같은 접근성 도구에 최신 UI 정보를 제공합니다. 👂
- RenderObject는 위젯과 달리 여러 프레임 동안 생존하며,
updateRenderObject를 통해 전달된 변경 사항에 반응합니다. ♻️
- RenderObject의 속성 변경 시 "마법의 세터"는 새 값이 다를 경우
markNeedsLayout, markNeedsPaint, markNeedsSemanticsUpdate와 같은 메서드를 호출하여 UI 업데이트를 트리거합니다. ✨
markNeedsLayout 호출은 항상 markNeedsPaint를 포함하므로, 레이아웃 변경 시 markNeedsPaint는 생략될 수 있습니다. 🧠
- 이러한
markNeeds 메서드 호출은 RenderObject가 위젯의 변경 사항에 적절히 반응하고 다음 프레임에서 진화하는 값을 렌더링하도록 보장합니다. ✅
데브허브 | DEVHUB | How Flutter Works: The RenderObject #DecodingFlutter