ข้ามไปยังเนื้อหา

Layout & Rendering

คุณอธิบาย UI เป็น tree ของ widget หน้าที่ของ Flutter คือเปลี่ยนคำอธิบายนั้นให้เป็น pixel ที่วางตำแหน่งและ paint ออกมา — และทำด้วย algorithm เล็ก ๆ อันเดียวที่เรียนรู้ได้ พอเข้าใจ algorithm นี้ layout จะเลิกเป็นการลองผิดลองถูก

โมดูลนี้ครอบคลุมอะไรบ้าง

บทเรียน	สิ่งที่คุณจะได้เรียนรู้
Constraints & layout	กฎเดียว: constraints ลงล่าง, size ขึ้นบน, parent เป็นคนวางตำแหน่ง
Core layout widgets	Row/Column/Flex, Expanded, Stack, Container และเพื่อน ๆ
Slivers & scrolling	lazy building, ListView, CustomScrollView และ sliver
The render pipeline	build, layout, paint, composite — เกิดอะไรขึ้นในแต่ละ frame

ไอเดียเดียวที่ต้องจำ

เกือบทุกคำถามเรื่อง layout ใน Flutter ตอบได้ด้วยประโยคเดียวที่คุณจะเจอในบทเรียนถัดไป:

flowchart TB
  p["Parent"] -->|1. passes constraints down| c["Child"]
  c -->|2. picks a size within them| p
  p -->|3. sets child position| done["Positioned + sized"]

บทสนทนาเรื่อง layout ระหว่าง parent กับ child

parent ส่ง constraints (min/max ของ width และ height) ให้ child, child เลือก size ของตัวเองภายในขอบเขตนั้น จากนั้น parent ตัดสินใจว่าจะวาง child ตรงไหน บทสนทนาสามขั้นนี้ ที่ทำซ้ำลงไปตาม tree คือทั้งหมดของระบบ layout