Flutter Widget Tree болон BuildContext
Үндсэн ойлголтууд
Widget Tree гэж юу вэ?
- Flutter апп нь Widget-үүдийн модон бүтэцтэй
- Эцэг Widget-ээс эхлээд хүүхэд Widget-үүд рүү салбарладаг
- Бүх Widget-үүд нь нэг эцэг Widget-тэй байх ёстой
flowchart TD
subgraph " Main Concept Diagram"
A[Widget Tree] --> B[Element Tree]
B --> C[Render Tree]
style A fill:#e1f5fe
style B fill:#fff3e0
style C fill:#f9fbe7
end
flowchart TD
subgraph "Widget Tree Жишээ."
I[MaterialApp] --> J[Scaffold]
J --> K[AppBar]
J --> L[Body]
L --> M[Center]
M --> N[Column]
N --> O[Text]
N --> P[ElevatedButton]
style I fill:#bbdefb
style J fill:#bbdefb
style K fill:#bbdefb
style L fill:#bbdefb
style M fill:#bbdefb
style N fill:#bbdefb
style O fill:#bbdefb
style P fill:#bbdefb
end
flowchart TD
subgraph "Profile Screen Widget Tree"
A[MaterialApp] --> B[Scaffold]
B --> C[AppBar]
B --> D[SingleChildScrollView]
C --> E[Text - Profile]
D --> F[Padding]
F --> G[Column]
G --> H[CircleAvatar]
G --> I[UserInfoCard]
G --> J[SettingsSection]
I --> K[Column]
K --> L[UserName]
K --> M[UserEmail]
J --> N[ListView]
N --> O[ListTile - Edit]
N --> P[ListTile - Privacy]
N --> Q[ListTile - Logout]
style A fill:#bbdefb
style B fill:#bbdefb
style C fill:#bbdefb
style D fill:#b2dfdb
style E fill:#ffcdd2
style F fill:#c8e6c9
style G fill:#c8e6c9
style H fill:#ffecb3
style I fill:#fff3e0
style J fill:#fff3e0
style K fill:#c8e6c9
style L fill:#e1bee7
style M fill:#e1bee7
style N fill:#b2dfdb
style O fill:#ffccbc
style P fill:#ffccbc
style Q fill:#ffccbc
end
flowchart TD
subgraph "Todo List Widget Tree"
A[MaterialApp] --> B[Scaffold]
B --> C[AppBar]
B --> D[Column]
C --> E[Text - Todo List]
D --> F[Expanded]
D --> G[AddTodoWidget]
F --> H[ListView.builder]
H --> I[TodoItem 1]
H --> J[TodoItem 2]
H --> K[TodoItem 3]
G --> L[Row]
L --> M[TextField]
L --> N[IconButton]
style A fill:#bbdefb
style B fill:#bbdefb
style C fill:#bbdefb
style D fill:#c8e6c9
style E fill:#ffcdd2
style F fill:#b2dfdb
style G fill:#fff3e0
style H fill:#e1bee7
style I fill:#ffccbc
style J fill:#ffccbc
style K fill:#ffccbc
style L fill:#c8e6c9
style M fill:#e1bee7
style N fill:#ffecb3
end
graph TD
subgraph "Login Screen Widget Tree"
A[MaterialApp] --> B[Scaffold]
B --> C[AppBar]
B --> D[SafeArea]
C --> E[Text - Login]
D --> F[Padding]
F --> G[Column]
G --> H[Image - Logo]
G --> I[TextField - Email]
G --> J[TextField - Password]
G --> K[ElevatedButton - Login]
G --> L[TextButton - Forgot Password]
classDef navigation fill:#bbdefb;
classDef container fill:#c8e6c9;
classDef form fill:#e1bee7;
classDef action fill:#ffccbc;
classDef image fill:#ffecb3;
classDef text fill:#ffcdd2;
classDef safe fill:#b2dfdb;
class A,B,C navigation;
class F,G container;
class I,J form;
class K,L action;
class H image;
class E text;
class D safe;
end
flowchart TD
subgraph "E-commerce Product Screen Widget Tree"
A[MaterialApp] --> B[Scaffold]
B --> C[AppBar]
B --> D[CustomScrollView]
C --> E[AppBarActions]
D --> F[SliverList]
F --> G[ProductImage]
F --> H[ProductDetails]
F --> I[AddToCartSection]
H --> J[Column]
J --> K[ProductTitle]
J --> L[ProductPrice]
J --> M[ProductDescription]
I --> N[Row]
N --> O[QuantitySelector]
N --> P[AddToCartButton]
E --> Q[CartIcon]
E --> R[FavoriteButton]
style A fill:#bbdefb
style B fill:#bbdefb
style C fill:#bbdefb
style D fill:#b2dfdb
style E fill:#fff3e0
style F fill:#c8e6c9
style G fill:#ffecb3
style H fill:#fff3e0
style I fill:#fff3e0
style J fill:#c8e6c9
style K fill:#e1bee7
style L fill:#e1bee7
style M fill:#e1bee7
style N fill:#c8e6c9
style O fill:#ffccbc
style P fill:#ffccbc
style Q fill:#ffecb3
style R fill:#ffecb3
end
Widget Tree Жишээ
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Жишээ'),
),
body: Center(
child: Container(
child: Text('Hello'),
),
),
),
)
Widget Tree Бүтэц
MaterialApp
└── Scaffold
├── AppBar
│ └── Text
└── Center
└── Container
└── Text
BuildContext гэж юу вэ?
- Widget-ийн байршлын мэдээллийг агуулдаг
- Widget Tree дэх Widget-ийн байрлалыг заадаг
- Theme, MediaQuery зэрэг өгөгдлүүдийг авах боломжийг олгодог
BuildContext Хэрэглээ
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Theme авах
final theme = Theme.of(context);
// Screen size авах
final size = MediaQuery.of(context);
// Navigator ашиглах
Navigator.of(context).push(...);
return Container(
color: theme.primaryColor,
width: size.size.width,
child: Text('Жишээ'),
);
}
}
BuildContext-ийн чухал онцлогууд
- Зөвхөн build функц дотор ашиглах боломжтой
- Widget-ийн амьдралын мөчлөгтэй холбоотой
- State удирдлагад чухал үүрэгтэй
- Widget Tree-гээр дээшээ аялах боломжтой
Түгээмэл хэрэглээний жишээнүүд
// Theme өгөгдөл авах
Theme.of(context).primaryColor
// Screen size авах
MediaQuery.of(context).size.width
// Snackbar харуулах
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Мэдэгдэл'))
);
// Navigation хийх
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => SecondScreen())
);
Бодит жишээ
class ProfileScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Профайл'),
),
body: Container(
width: MediaQuery.of(context).size.width * 0.9,
child: Column(
children: [
// Theme-ийг ашиглах
Container(
color: Theme.of(context).primaryColor,
child: Text('Хэрэглэгчийн мэдээлэл'),
),
// Snackbar харуулах товч
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Амжилттай хадгалагдлаа')),
);
},
child: Text('Хадгалах'),
),
],
),
),
);
}
}
Сайн дадлууд
- BuildContext-ийг үргэлж build функц дотор ашиглах
- Widget Tree-г аль болох хялбар байлгах
- Context-ийг хэт гүн давхарга руу дамжуулахаас зайлсхийх
- Theme, MediaQuery-г олон давтахгүй байх
Түгээмэл алдаанууд
- Build функцаас гадуур BuildContext ашиглах
- Disposed Widget-ийн Context ашиглах
- StatelessWidget дотор State-тэй холбоотой Context ашиглах
- Widget Tree-г хэт гүн болгох
Асуулт байна уу?
Flutter Widget Tree болон BuildContext-ийн талаар