Flutter ramka uchun qo'llanma 1-bob. Flutterga kirish Flutter nima. O'rnatish

StatelessWidget

Odatda, ilova yaratganingizda, yangi vidjetlar odatda StatelessWidget yoki StatefulWidget sinfining quyi sinflari sifatida aniqlanadi. Ularning orasidagi farq nima?
Vidjetlar ikki xil bo‘ladi: davlat (statistik) va fuqaroligi bo‘lmagan (fuqaroligi yo‘q).
Fuqaroligi yoʻq vidjetlar ilova ishlayotgan vaqtda oʻz xususiyatlarini oʻzgartirmaydi. Bunday vidjetlar fuqaroligi yo'q. Ular faqat asosiy konteyner vidjetlarida yonadigan tashqi hodisalar orqali o'zgartirilishi mumkin. StatelessWidget klassi esa bu turdagi vidjetlarni ifodalaydi.

Odatda, ilova yaratganingizda, yangi vidjetlar odatda StatelessWidget yoki StatefulWidget sinfining quyi sinflari sifatida aniqlanadi. Ularning orasidagi farq nima?

Vidjetlar ikki xil bo‘ladi: davlat (statistik) va fuqaroligi bo‘lmagan (fuqaroligi yo‘q).
Fuqaroligi yoʻq vidjetlar ilova ishlayotgan vaqtda oʻz xususiyatlarini oʻzgartirmaydi. Bunday vidjetlar fuqaroligi yo'q. Ular faqat asosiy konteyner vidjetlarida yonadigan tashqi hodisalar orqali o'zgartirilishi mumkin. StatelessWidget klassi esa bu turdagi vidjetlarni ifodalaydi.

Statusli vidjetlar ilova ishlayotgan vaqtda o‘z xususiyatlarini dinamik ravishda o‘zgartirishi mumkin. Shtat Davlat sinfining obyekti sifatida saqlanadi. StatefulWidget klassi esa holatni saqlay oladigan vidjetlarni ifodalaydi.

Birinchidan, StatelessWidget sinfi bilan qanday ishlashimiz mumkinligini ko'rib chiqamiz.
Ushbu sinf fuqaroligi bo'lmagan vidjetlarni yaratish uchun javob beradi. Subklassni yaratishda siz build () usulini bekor qilishingiz kerak. Ushbu usul interfeysni yaratish uchun ishlatiladi va odatda uchta holatda chaqiriladi:

vidjet birinchi marta foydalanuvchi interfeysini tavsiflovchi vidjet daraxtiga qo'shilganda

StatelessWidget quyi sinfi joylashgan konteyner StatelessWidget pastki sinfining konfiguratsiyasini o'zgartirganda
StatelessWidget pastki sinfi o'zgarishlarga bog'liq bo'lgan InheritedWidget qachon

Agar konteyner ichki o'rnatilgan StatelessWidget konfiguratsiyasini tez-tez o'zgartirsa, build () usuli ham tez-tez chaqiriladi. Va bu holatda, siz ushbu usulga qo'ng'iroqni optimallashtirishingiz kerak bo'lishi mumkin. Buning uchun siz qurish () usulida yaratilgan vidjetlar sonini kamaytirishingiz mumkin. Yana bir usul - imkon qadar vidjetlarni aniqlashda va vidjetlar uchun doimiy konstruktorni aniqlashda const operatoridan foydalanish.

StatelessWidget-ning eng oddiy kichik sinfining ta'rifi:

1 2 3 4 5 6 7 8 9

class MyStatelessWidget extends StatelessWidget{   @override   Widget build(BuildContext context) {           return Container(       color: Colors.white,     );   } }

BuildContext ob'ekti vidjet konteksti haqidagi ma'lumotlarni o'z ichiga olgan build () usuliga parametr sifatida uzatiladi.
Qurilish () usuli boshqa vidjetni qaytarishi kerak. Bunday holda, u Konteyner vidjetini qaytaradi.
Vidjetimdan qanday foydalanaman? Keling, eng oddiy vidjetni yaratamiz va foydalanamiz:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

import 'package:flutter/material.dart';   void main() {   runApp(MyStatelessWidget()); }   class MyStatelessWidget extends StatelessWidget{   @override   Widget build(BuildContext context) {       return Container(       color: Colors.white,       padding: EdgeInsets.only(top:40),       child: const Text(           "Hello Flutter from METANIT.COM",           style: TextStyle(fontSize: 22, color: Colors.lightBlue),           textAlign: TextAlign.center,           textDirection: TextDirection.ltr,       ),     );   } }

Bunday holda, maxsus vidjet yanada murakkab tuzilmani o'z ichiga oladi - unda Konteyner mavjud bo'lib, u o'z navbatida Matn vidjetini o'z ichiga oladi.

runApp () usulida biz ushbu vidjetdan ilovamiz uchun asosiy konteyner sifatida foydalanamiz:

1	runApp(MyStatelessWidget());

Bunday holda, bizning maxsus vidjetimiz boshqa barcha vidjetlarni o'z ichiga olgan konteyner vazifasini bajaradi. Biroq, u ichki element sifatida ham ishlatilishi mumkin. Masalan:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

import 'package:flutter/material.dart';   void main() {   runApp(Container(     color: Colors.white,     padding: EdgeInsets.only(top:40),     child: const MyStatelessWidget(),   )); }   class MyStatelessWidget extends StatelessWidget{   const MyStatelessWidget({ Key key }) : super(key: key);   @override   Widget build(BuildContext context) {       return Text(           "Hello Flutter!",           style: TextStyle(fontSize: 22, color: Colors.lightBlue),           textAlign: TextAlign.center,           textDirection: TextDirection.ltr,     );   } }

Bunday holda, MyStatelessWidget vidjeti Konteyner elementi ichiga joylashtirilgan. Shuni ta'kidlash kerakki, bu erda vidjetda doimiy konstruktor ham aniqlangan. Asosan, uning ta'rifi ixtiyoriy, u faqat vidjetdan foydalanganda const operatoridan foydalanishga imkon beradi:

1	child: const MyStatelessWidget(),

Key parametri konstruktorga parametr sifatida uzatiladi, bu esa StatelessWidget asosiy klassi konstruktoriga uzatiladi.

1	const MyStatelessWidget({ Key key }) : super(key: key);

Vidjetga qo'ng'iroq qilishda biz unga Key ob'ektini aniq o'tkazishimiz shart emas - bu ob'ekt tizim tomonidan uzatiladi.
Konstruktorlarni aniqlash va ma'lumotlarni uzatish

Yuqorida belgilangan konstruktor aslida StatelessWidget asosiy sinfining konstruktorini takrorlaydi. Biroq, biz kerak bo'lganda boshqa konstruktorlarni belgilashimiz mumkin. Odatda konstruktorlar ba'zi ma'lumotlarni vidjetga tashqaridan uzatish uchun ishlatiladi. Masalan:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

import 'package:flutter/material.dart';   void main() {   runApp(Container(     color: Colors.white,     padding: EdgeInsets.only(top:40),     child: const MyStatelessWidget(myText: "Flutter on metanit.com", myColor: Colors.redAccent),   )); }   class MyStatelessWidget extends StatelessWidget{   final String myText;   final Color myColor;   const MyStatelessWidget({ Key key, this.myText, this.myColor }) : super(key: key);     @override   Widget build(BuildContext context) {       return Text(           myText,           style: TextStyle(fontSize: 22, color: myColor),           textAlign: TextAlign.center,           textDirection: TextDirection.ltr,     );   } }

Bunday holda, rang va matn ham tashqaridan MyStatelessWidget konstruktoriga uzatiladi, keyinchalik ular matnni ko'rsatish uchun ishlatiladi.

Xuddi shunday, biz StatelessWidget kichik sinfida ichki o'rnatilgan vidjetlarni belgilashimiz mumkin:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

import 'package:flutter/material.dart';   void main() {   runApp(Container(     color: Colors.white,     padding: EdgeInsets.only(top:25),     child: const MyStatelessWidget(       myColor: Colors.tealAccent,       myChild: Text("Flutter на metanit.com",         style: TextStyle(fontSize: 22, color: Colors.teal),         textAlign: TextAlign.center,         textDirection: TextDirection.ltr,),     ),   )); }   class MyStatelessWidget extends StatelessWidget{     final Widget myChild;   final Color myColor;     const MyStatelessWidget({ Key key, this.myChild, this.myColor = Colors.white70}) : super(key: key);     @override   Widget build(BuildContext context) {       return Container(       color: myColor,       child: myChild     );   } }

Bunday holda, o'rnatilgan konteynerda bo'ladigan vidjet myChild xususiyati orqali uzatiladi.