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

2-bob. Konteynerlar va joylashtirishni boshqarish

Bitta vidjet yoki vidjetlar to‘plamini ma’lum bir tarzda tashkil qilish va joylashtirish uchun maxsus vidjetlar – vidjetlar (shu jumladan, boshqa konteynerlar) joylashuvini boshqaruvchi maket vidjetlari qo‘llaniladi. Flutterda bu vidjetlar guruhi juda keng tarqalgan. Keling, ulardan ba'zilarini ko'rib chiqaylik.

Align

Align vidjeti konteynerning ma'lum bir tomoniga nisbatan joylashtirilgan elementni joylashtirish imkonini beradi. Odatiy bo'lib, u idishning to'liq kengligi va balandligi bo'ylab cho'zilib, uning butun maydonini to'ldiradi.

Vidjet yaratish uchun quyidagi konstruktordan foydalaniladi:

1	Align({Key key, AlignmentGeometry alignment: Alignment.center, double widthFactor, double heightFactor, Widget child})

Konstruktorning imzosidan ko'rinib turibdiki, uning barcha parametrlari ixtiyoriy. Idishning ma'lum bir chetiga tekislash qo'llaniladigan ichki elementni o'rnatish uchun bola parametridan foydalaniladi - har qanday Vidjet ob'ekti, ya'ni har qanday vidjet uning vazifasini bajarishi mumkin.
widthFactor va heightFactor qo'shimcha parametrlari - bu markaz vidjetining eni va balandligining ichki o'rnatilgan bolaga nisbatan nisbati. Misol uchun, agar widthFactor 2,0 bo'lsa, u holda Markaz vidjetining kengligi bolaning kengligining 2,0 ga ko'paytirilganiga teng bo'ladi. Xuddi shu narsa heightFactor uchun ham amal qiladi, faqat u balandlikni o'zgartiradi.

Hizalashni o'rnatish uchun AlignmentGeometry sinfini ifodalovchi va quyidagi qiymatlarni olishi mumkin bo'lgan hizalama parametri ishlatiladi:

Alignment.bottomCenter: gorizontal ravishda markazga, vertikal ravishda idishning pastki chetiga (pastki markaz) tekislanadi. Alignment bilan bir xil (0,0, 1,0)
Alignment.bottomLeft: gorizontal ravishda chapga, vertikal ravishda idishning pastki qismiga (pastki chap) tekislanadi. Hizalama qiymati bilan bir xil (-1,0, 1,0)
Alignment.bottomRight: gorizontal ravishda o'ngga, vertikal ravishda konteynerning pastki qismiga (pastki o'ngda) tekislanadi. Alignment bilan bir xil (1.0, 1.0)
Alignment.center: markazga gorizontal va vertikal tekislash. Hizalama bilan bir xil (0,0, 0,0)
Alignment.centerLeft: gorizontal ravishda chapga, vertikal ravishda konteyner markaziga tekislanadi. Hizalama bilan bir xil (-1,0, 0,0)

Alignment.centerRight: gorizontal ravishda o'ngga, vertikal ravishda konteyner markaziga tekislanadi. Alignment bilan bir xil (1,0, 0,0)

Alignment.topCenter: gorizontal markazlashtirilgan, konteynerning yuqori qismida vertikal tekislangan (yuqori markaz). Hizalama bilan bir xil (0,0, -1,0)
Alignment.topLeft: gorizontal ravishda chapga, vertikal ravishda konteynerning tepasiga (yuqori chapda) tekislanadi. Hizalama bilan bir xil (-1,0, -1,0)
Alignment.topRight: gorizontal ravishda o'ngga, vertikal ravishda konteynerning tepasiga (yuqori o'ngda) tekislanadi. Hizalama bilan bir xil (1.0, -1.0)

Konstruktordagi alignment parametri AlignmentGeometry sinfini ifodalasa-da, bu erda konstantalar AlignmentGeometry dan meros bo'lgan Alignment sinfini ifodalaydi.

Matnni, masalan, chapdan markazga joylashtirish uchun Align vidjetidan foydalanamiz:

1 2 3 4 5 6 7 8 9 10 11 12 13

import 'package:flutter/material.dart';   void main() {   runApp(Align(     alignment: Alignment.centerLeft,       child:Text(       'Текст слева по центру!',       textDirection: TextDirection.ltr,   // текст слева направо       style: TextStyle(fontSize: 24) // высота шрифта 24     )   )   ); }

Fractional Ofset

FractionalOffset klassi Alignment sinfidan meros bo'lib, elementni joylashtirish uchun qo'shimcha imkoniyatlarni taqdim etadi. U quyidagi konstruktorga ega:

1	FractionalOffset(double dx, double dy)

Bu erda dx - gorizontal siljish va dy - vertikal siljish. Ofsetlar 0,0 dan 1,0 gacha bo'lgan kasrlarda ifodalanadi, masalan, FractionalOffset (1,0, 0,0) konteynerning yuqori o'ng burchagini, FractionalOffset (0,0, 1,0) esa pastki chap burchakni ifodalaydi. Shunga ko'ra, FractionalOffset (0,5, 0,5) markazdir (gorizontal va vertikal). Kerakli ofsetni ko'rsatib, biz elementni konteynerning ma'lum bir qismiga joylashtirishimiz mumkin. Masalan:

1 2 3 4 5 6 7 8 9 10 11 12 13

import 'package:flutter/material.dart';   void main() {   runApp(Align(       alignment: FractionalOffset(0.2, 0.3),       child:Text(       'Hello Flutter',       textDirection: TextDirection.ltr,   // текст слева направо         style: TextStyle(fontSize: 20) // высота шрифта 20     )    )   ); }

FractionalOffset qiymati (0,2, 0,3) ichki o'rnatilgan Matn elementining yuqori burchagi quyidagi koordinatalarda joylashishini bildiradi: X = Align_container_width * 0,2, Y = Align_container_height * 0,3.

Center

Markaz ichki joylashtirilgan elementni markazlashtiradi. U Align sinfidan meros bo'lib qolgan, shuning uchun u ko'p jihatdan funksionallikni o'z zimmasiga oladi. Odatiy bo'lib, u idishning to'liq kengligi va balandligi bo'ylab cho'zilib, uning butun maydonini to'ldiradi.
Vidjet yaratish uchun quyidagi konstruktordan foydalaniladi:

1	Center({Key key, double widthFactor, double heightFactor, Widget child})

Markazlash qo'llaniladigan ichki elementni o'rnatish uchun bola parametridan foydalaniladi - u sifatida istalgan Vidjet ob'ekti, ya'ni har qanday vidjetdan foydalanish mumkin.
widthFactor va heightFactor qo'shimcha parametrlari Markaz vidjetining eni va balandligining ichki o'rnatilgan bolaga nisbatan nisbatini o'rnatadi. Misol uchun, agar widthFactor 2,0 bo'lsa, u holda Markaz vidjetining kengligi bolaning kengligining 2,0 ga ko'paytirilganiga teng bo'ladi. Xuddi shu narsa heightFactor uchun ham amal qiladi, faqat u balandlikni o'zgartiradi.
Masalan, Markaz vidjeti yordamida markazga kichik matnni joylashtiramiz:

1 2 3 4 5 6 7 8 9 10 11

import 'package:flutter/material.dart';   void main() {   runApp(Center(       child:Text(       'Hello Flutter',       textDirection: TextDirection.ltr,   // текст слева направо     )   )   ); }

Aslida, bu kod quyidagilarga teng bo'ladi:

1 2 3 4 5 6 7 8 9 10 11 12

import 'package:flutter/material.dart';   void main() {   runApp(Align(     alignment: Alignment.center,       child:Text(       'Hello Flutter!',       textDirection: TextDirection.ltr     )   )   ); }