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

StatefulWidget va State
StatefulWidget klassi statistik vidjetlarni yaratish uchun moʻljallangan. Shu bilan birga, StatefulWidget sinfi ob'ektlari o'zgarmas bo'lishiga qaramay, ularning holati o'zgaruvchan.
Davlat nima? Holat - bu vidjet yaratilganda sinxron tarzda o‘qilishi mumkin bo‘lgan va vidjetning hayot aylanishi davomida o‘zgarishi mumkin bo‘lgan ba’zi ma’lumotlar. Davlat alohida Davlat ob'ektlari sifatida yoki Davlat ob'ekti obuna bo'lgan boshqa ob'ektlarda saqlanishi mumkin.

Holat ob'ektlari framework tomonidan chaqiriladigan va ularni StatefulWidget bilan bog'laydigan createState usuli yordamida yaratiladi.

Masalan, eng oddiy StatefulWidgetni aniqlaymiz:

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

import 'package:flutter/material.dart';   void main() {   runApp(MaterialApp(       home:  Scaffold(         body: Counter(),         appBar: AppBar(title: Text("METANIT.COM")),)   )); }   class Counter extends StatefulWidget{   Counter({ Key key}) : super(key: key);   @override   _CounterState createState() => _CounterState(); } class _CounterState extends State{     int value = 0;     @override   Widget build(BuildContext context) {       return Text(       "Value: $value", style: TextStyle(fontSize: 22),     );   } }

Shunday qilib, bu erda StatefulWidget-dan meros bo'lgan Counter klassi aniqlandi.
Uning konstruktori bitta parametr - kalitni o'z ichiga oladi, garchi kerak bo'lsa, biz ehtiyojlarimizdan kelib chiqqan holda boshqa parametrlarni belgilashimiz mumkin.
Shuningdek, vidjet sinfi bu vidjet holatini qaytarishi kerak bo‘lgan createState () usulini bekor qilishi kerak.

1 2	@override _CounterState createState() => _CounterState();

Bunday holda, u _CounterState sinfining ob'ekti hisoblanadi. (Oldinda chiziqcha (_) qoʻyilgan sinflar yoki sinf aʼzolari boshqa kutubxonalar sinflari uchun shaxsiydir.)
Shtat sinfining o'zi vidjetlar sinfi tomonidan terilgan Davlat sinfidan meros qilib olingan.

1	class _CounterState extends State{

Sinfning o'zi shartli ravishda davlat sinfi saqlaydigan ma'lumotlarni ifodalovchi o'zgaruvchan qiymatni belgilaydi.

1	int value = 0;

Shuningdek, biz vidjetni qaytaradigan build () usulini bekor qilishimiz kerak:

1 2 3 4 5 6

Widget build(BuildContext context) {   return Text(   "Value: $value", style: TextStyle(fontSize: 22), ); }

Bu erda biz shunchaki o'zgaruvchi qiymatining qiymatini chiqaradigan Matn vidjetini qaytaramiz. Ammo tabiiy ravishda qaytarilgan vidjet ierarxiyasi murakkabroq bo'lishi mumkin.
Keyin Counter vidjeti Scaffold elementidagi dasturga kiritilgan:

1 2 3 4

void main() {   runApp(MaterialApp(       home:  Scaffold(         body: Counter(),

Natijada, dasturni ishga tushirishda biz o'zgaruvchining qiymatini ko'rsatadigan matnni ko'ramiz

Ammo StatefulWidget ortidagi asosiy g'oya shundan iboratki, biz uning holatini o'zgartirishimiz mumkin. Shuning uchun, tugmani bosish orqali qiymat o'zgaruvchisiga o'zgartirish kiritamiz:

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

import 'package:flutter/material.dart';   void main() {   runApp(MaterialApp(       home:  Scaffold(         body: Counter(),         appBar: AppBar(title: Text("METANIT.COM")),)   )); } class Counter extends StatefulWidget{   Counter({ Key key}) : super(key: key);   @override   _CounterState createState() => _CounterState(); } class _CounterState extends State{     int value = 0;     @override   Widget build(BuildContext context) {       return ElevatedButton(         child: Text("Value: $value", style: TextStyle(fontSize: 22)),         onPressed:(){ setState(() {           value++;         });}     );   } }

Endi soddalik uchun qiymat o'zgaruvchisining qiymati tugmachaga matn sifatida ko'rsatiladi. Tugmani bosganingizda, qiymatni bittaga oshiradigan funksiya chaqiriladi. Holat o'zgarganligini ko'rsatish uchun vidjet State.setState () usulini chaqiradi. Ushbu usul hech qanday parametrlarni olmaydigan va hech narsa qaytarmaydigan funktsiyaga o'tadi. Va bu erda biz qiymatni o'zgartirishimiz mumkin.
Natijada, tugmani bosish orqali qiymat o'zgaruvchisining qiymati ortadi:

Shtatga ma'lumotlarni uzatish

Agar kerak bo'lsa, ma'lumotlar Davlat ob'ektiga tashqaridan uzatilishi mumkin. Bunday holda, uzatish StatefulWidget orqali amalga oshiriladi. Masalan, yuqoridagi misolni Shtat tashqaridan dastlabki ma'lumotlarni qabul qilishi uchun o'zgartiramiz:

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 33 34 35 36 37 38 39

import 'package:flutter/material.dart';   void main() {   runApp(MaterialApp(       home:  Scaffold(         body: Column(children:[           Counter(value: 4, increment: 2),           Counter(value:-1, increment: 1)         ]),         appBar: AppBar(title: Text("METANIT.COM")),)   )); } class Counter extends StatefulWidget{     int value = 0;   int increment = 1;     Counter({ Key key, this.value, this.increment}) : super(key: key);   @override   _CounterState createState() => _CounterState(this.value, this.increment); } class _CounterState extends State{     int value = 0;   int increment = 1;     _CounterState(this.value, this.increment);     @override   Widget build(BuildContext context) {       return ElevatedButton(         child: Text("Value: $value", style: TextStyle(fontSize: 22)),         onPressed:(){ setState(() {           value = value + increment;         });}     );   } }

Bunday holda, o'zgaruvchi qiymatining qiymatini oshiruvchi Davlatga yangi o'zgaruvchi qo'shildi. Ushbu o'zgaruvchilar uchun qiymatlarni tashqaridan olish uchun _CounterState (this.value, this.increment) konstruktori aniqlanadi.
Davlat ob'ektini yaratishda Hisoblagich vidjeti mos keladigan ma'lumotlarni konstruktorga uzatadi:

1	_CounterState createState() => _CounterState(this.value, this.increment);

Shu bilan birga, Counter vidjetining o'zi konstruktor yordamida ushbu qiymatlarni tashqi tomondan oladi:

1	Counter({ Key key, this.value, this.increment}) : super(key: key);

Natijada, vidjetdan foydalanganda biz unga turli xil ma'lumotlarni uzatishimiz mumkin:

1 2 3 4

Column(children:[   Counter(value: 4, increment: 2),   Counter(value:-1, increment: 1) ])

Vidjet olish

Shtat ichidagi vidjet xususiyatidan foydalanib, Davlat ob'ekti bog'langan StatefulWidget-ga murojaat qilishingiz 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 33 34 35

import 'package:flutter/material.dart';   void main() {   runApp(MaterialApp(       home:  Scaffold(         body: Column(children:[           Counter(increment: 2),           Counter(increment: 1),         ]),         appBar: AppBar(title: Text("METANIT.COM")),)   )); } class Counter extends StatefulWidget{     int increment = 1;     Counter({ Key key, this.increment}) : super(key: key);   @override   _CounterState createState() => _CounterState(); } class _CounterState extends State{     int value = 0;     @override   Widget build(BuildContext context) {       return ElevatedButton(         child: Text("Value: $value", style: TextStyle(fontSize: 22)),         onPressed:(){ setState(() {           value = value + widget.increment;         });}     );   } }

Bunday holda, o'sish o'zgaruvchisi faqat Counter sinfida aniqlanadi va unga widget.increment ifodasi orqali kirish mumkin, bu erda vidjet Hisoblagich vidjeti hisoblanadi. Xuddi shunday, agar mavjud bo'lsa, vidjetdan boshqa maydonlar va usullarga murojaat qilishingiz mumkin.
Holatni o'zgartirish mantiqini usulga olib tashlash

Yuqoridagi misollarda holatni o'zgartirish uchun barcha mantiq onPressed funksiyasida jamlangan. Ammo bu harakatlarning barchasi alohida usulda ham amalga oshirilishi 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 33 34 35 36 37 38

import 'package:flutter/material.dart';   void main() {   runApp(MaterialApp(       home:  Scaffold(         body: Column(children:[           Counter(increment: 2),           Counter(increment: 1),         ]),         appBar: AppBar(title: Text("METANIT.COM")),)   )); } class Counter extends StatefulWidget{     int increment = 1;     Counter({ Key key, this.increment}) : super(key: key);   @override   _CounterState createState() => _CounterState(); } class _CounterState extends State{     int value = 0;     increaseValue(){     setState(() {       value = value + widget.increment;     });   }   @override   Widget build(BuildContext context) {       return ElevatedButton(         child: Text("Value: $value", style: TextStyle(fontSize: 22)),         onPressed:(){ increaseValue();}     );   } }

Agar barcha harakatlar amalga oshirilgan usul hech narsani qaytarmasa va hech qanday parametrlarni qabul qilmasa, ya'ni onPressed ta'rifiga to'g'ri kelsa (bu holatda bo'lgani kabi), unda siz to'g'ridan-to'g'ri onPressed parametriga funktsiyani belgilashingiz mumkin:

1 2 3 4

ElevatedButton(         child: Text("Value: $value", style: TextStyle(fontSize: 22)),         onPressed: increaseValue );