Flutter-ийн Stateless Widget болон Stateful Widget нь аппликейшний UI-г бүтээхэд хамгийн чухал хэсгүүд бөгөөд тэдний хоорондын ялгааг гүнзгий ойлгосноор та динамик болон статик UI-г зөв зохион байгуулж чадна.
Виджет нь stateful эсвэл stateless гэсэн хоёр төрөлтэй байдаг. Хэрэв виджет нь хэрэглэгчийн үйлдэлд хариу үйлдэл үзүүлж өөрчлөгдөж чаддаг бол энэ нь stateful виджет гэж үзнэ.
Stateless виджет нь хэзээ ч өөрчлөгддөггүй. Жишээ нь: Icon, IconButton, Text зэрэг нь stateless виджетүүд юм. Stateless виджет нь StatelessWidget ангийг өвлөнө.
Харин Stateful виджет нь динамик шинж чанартай бөгөөд жишээлбэл, хэрэглэгчийн үйлдлээс шалтгаалан өөрийн харагдах байдал өөрчлөгдөх эсвэл шинэ өгөгдөл хүлээн авснаар өөрчлөгдөж болно. Жишээ нь: Checkbox, Radio, Slider, InkWell, Form, TextField зэрэг нь stateful виджетүүд юм. Stateful виджет нь StatefulWidget ангийг өвлөнө.
Виджетийн байдал (state) нь State объектод хадгалагддаг бөгөөд энэ нь виджетийн байдал болон харагдах байдлыг тусгаарладаг. Байдал нь слайдерийн одоогийн утга эсвэл чекбоксын сонгогдсон эсэх зэрэг өөрчлөгдөж болох утгуудыг агуулна. Виджетийн байдал өөрчлөгдөх үед state объект нь setState() функцыг дуудаж, хүрээг (framework) виджетийг дахин зурахыг үүрэгдэнэ.
Stateless Widget
Stateless Widget нь байдалгүй (state-free) буюу өөрчлөгдөхгүй байнгын UI элемент юм.
Үндсэн Шинжүүд:
- Өөрчлөгдөхгүй:
- StatelessWidget нь өгөгдсөн утгыг (properties) ашиглан UI-г нэг удаа дүрслээд, дахин өөрчлөгдөхгүй.
Жишээлбэл, нэг удаа текст эсвэл өнгийг дүрсэлсэн бол энэ нь зөвхөн шинэчлэлт хийх үед л өөрчлөгдөнө.
- StatelessWidget нь өгөгдсөн утгыг (properties) ашиглан UI-г нэг удаа дүрслээд, дахин өөрчлөгдөхгүй.
- Гүйцэтгэлийн хувьд хурдан:
- StatelessWidget нь дотооддоо нэмэлт байдал хадгалдаггүй учир харьцангуй хурдан.
- Программын бүтэц:
- Гэхдээ статик UI-д тохиромжтой тул зөвхөн өөрчлөгддөггүй элементүүдийг харуулахад ашиглагдана.
- Өөрчлөгдөхгүй:
Stateful Widget
Stateful Widget нь дотооддоо байдал (state) хадгалах боломжтой бөгөөд UI нь хэрэглэгчийн үйлдэл эсвэл өөр өгөгдлөөс хамаарч өөрчлөгдөж чаддаг.
Үндсэн Шинжүүд:
- Төлөвтэй (state):
- StatefulWidget нь байнгын өөрчлөлт шаарддаг элементүүдийг харуулахад тохиромжтой.
Жишээ нь: тоологч (counter), формын талбар, ачаалж буй дэлгэц.
- StatefulWidget нь байнгын өөрчлөлт шаарддаг элементүүдийг харуулахад тохиромжтой.
- State болон setState:
- StatefulWidget нь өөрийн State ангитай бөгөөд UI-гийн өөрчлөлтийг setState()-ээр дамжуулан удирдана.
- setState() нь зөвхөн тухайн компонентын өөрчлөлттэй хэсгийг дахин зурна.
- Хэрэглээний жишээ:
- Тоглоомын оноо.
- Хэрэглэгчийн мэдээлэл динамик байдлаар солигдох.
- Төлөвтэй (state):
Шинж чанар
Өөрчлөгдөх байдал
Stateless Widget
Байдлыг хадгалахгүй, нэг удаа дүрсэлнэ.
Stateful Widget
Байдлыг хадгална, байнгын өөрчлөгдөж болно.
Гүйцэтгэл
Хурдан, нөөц бага хэрэглэнэ.
Илүү олон нөөц шаарддаг, динамик ажилладаг.
Шинэчлэл
Дахин бүтээхгүй, зөвхөн анх тогтоосон UI.
setState ашиглан UI-г дахин зурна.
Жишээ
Text, Icon, Container.
TextField, Checkbox, Slider.
Хэзээ ашиглах вэ?
- Stateless Widget: UI нь нэг удаа дүрслэгдэж өөрчлөгдөх шаардлагагүй бол.
Жишээ нь: Лого, статик текст, энгийн дэлгэцүүд. - Stateful Widget: UI нь байнга шинэчлэгдэх шаардлагатай бол.
Жишээ нь: Хэрэглэгчийн оруулсан мэдээлэл, динамик контент.
- Stateless Widget: UI нь нэг удаа дүрслэгдэж өөрчлөгдөх шаардлагагүй бол.
Flutter аппликейшнд таны UI динамик эсэхээс хамаарч Stateless болон Stateful widget-ийг зөв зохистой хослуулж ашиглах нь чухал. Stateless Widget нь гүйцэтгэлийн хувьд илүү үр дүнтэй бол Stateful Widget нь илүү олон үйлдэл болон өөрчлөлтөд уян хатан байдлыг олгодог.
Шинэ бичвэрүүд
How to Find and Fix Errors in Your Code 2025-01-19
Arithmetic Logic Unit (ALU) гэж юу 2025-01-18
