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

Column

Ustun konteyneri elementlarni vertikal ravishda ustunga joylashtiradi.
Vidjet yaratish uchun quyidagi konstruktordan foydalaniladi:

1 2 3

Column({Key key, MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, MainAxisSize mainAxisSize: MainAxisSize.max, CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, TextDirection textDirection, VerticalDirection verticalDirection: VerticalDirection.down, TextBaseline textBaseline, List children: const []})

Uning parametrlari:
kalit: vidjet kaliti
mainAxisAlignment: vertikal tekislashni o'rnatadi
mainAxisSize: Asosiy o'q bo'ylab vidjet egallagan joyni o'rnatadi
crossAxisAlignment: Gorizontal tekislashni belgilaydi
textDirection: ichki joylashtirilgan elementlarning gorizontal tartibini belgilaydi
verticalDirection: ichki joylashtirilgan elementlarning vertikal tartibini aniqlaydi
textBaseline: elementlarni tekislash uchun asosiy chiziqni o'rnatadi
bolalar: ichki o'rnatilgan elementlar to'plami
Eng oddiy Ustun vidjeti:

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

import 'package:flutter/material.dart';   void main() {   runApp(Container(     padding: EdgeInsets.all(30),     color: Colors.teal,     child:Column(         children: [           Text('Вот мысль, которой весь я предан,',               textDirection: TextDirection.ltr),           Text('Итог всего, что ум скопил.',               textDirection: TextDirection.ltr),           Text('Лишь тот, кем бой за жизнь изведан,',               textDirection: TextDirection.ltr),           Text('Жизнь и свободу заслужил.',               textDirection: TextDirection.ltr)         ],       )     )   ); }

Shuni yodda tutish kerakki, Ustun vidjeti aylantirishni qo'llab-quvvatlamaydi. Shuning uchun, agar siz ko'rinadigan bo'shliqdan tashqariga chiqadigan vidjetlarga kirishni ta'minlashingiz kerak bo'lsa, unda Ustun o'rniga boshqa konteynerdan, masalan, ListView-dan foydalanish yaxshiroqdir.

Cross AxisAlignment

Ustun konstruktoridagi crossAxisAlignment parametri ichki o'rnatilgan vidjetlar kesishuvchi o'q bo'ylab qanday joylashishini belgilaydi - bu holda, gorizontal. Ushbu parametr quyidagi qiymatlarni olishi mumkin:

CrossAxisAlignment.center: Odatiy bo'lib ichki o'rnatilgan elementlarni gorizontal ravishda markazlashtiradi. CrossAxisAlignment (2) bilan bir xil.
CrossAxisAlignment.end: ichki o'rnatilgan elementlarni gorizontal o'qning oxiriga joylashtiradi. Ustunda textDirection konstruktorining boshqa parametri TextDirection.ltr bo'lsa (ya'ni matn chapdan o'ngga), u holda elementlar o'ngga tekislanadi. Va agar u TextDirection.rtl ga teng bo'lsa (ya'ni, matn o'ngdan chapga), u holda elementlar chapga tekislanadi. CrossAxisAlignment (1) bilan bir xil.

CrossAxisAlignment.start: Kesishuvchi o'q boshida joylashgan elementlarni joylashtiradi. Ustunda textDirection konstruktorining boshqa parametri TextDirection.ltr bo'lsa (ya'ni matn chapdan o'ngga), u holda elementlar chapga tekislanadi. CrossAxisAlignment (0) bilan bir xil.

CrossAxisAlignment.stretch: Ichki elementlarni Ustun konteynerining to'liq kengligigacha uzaytiradi. CrossAxisAlignment (3) bilan bir xil.

CrossAxisAlignment.baseline: Ichki elementlarni asosiy chiziqqa - kesishuvchi o'qga tekislaydi. CrossAxisAlignment (4) bilan bir xil. Ustunli konteyner uchun bu aslida CrossAxisAlignment.start bilan bir xil. textBaseline parametrini o'rnatishni talab qiladi

Birinchi misolda, skrinshotdan ko'rinib turibdiki, CrossAxisAlignment.center sukut bo'yicha ishlatiladi, ya'ni barcha ichki o'rnatilgan vidjetlar markazlashtirilgan. Biz boshqa qiymatdan foydalanamiz:

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(     padding: EdgeInsets.all(30),     color: Colors.teal,     child:Column(         textDirection: TextDirection.ltr,         crossAxisAlignment: CrossAxisAlignment.start,         children: [           Text('Вот мысль, которой весь я предан,',               textDirection: TextDirection.ltr),           Text('Итог всего, что ум скопил.',               textDirection: TextDirection.ltr),           Text('Лишь тот, кем бой за жизнь изведан,',               textDirection: TextDirection.ltr),           Text('Жизнь и свободу заслужил.',               textDirection: TextDirection.ltr)         ],       )     )   ); }

CrossAxisAlignment: CrossAxisAlignment.start qiymati konteynerning chap tekislanishini o'rnatadi. Biroq, matnning yo'nalishlari har xil bo'lishi mumkinligi sababli - o'ng va chap qo'l, matnning yo'nalishini ham ko'rsatish kerak textDirection: TextDirection.ltr. Matnning yo'nalishiga qarab, boshlang'ich chap tomonda (chapdan o'ngga) yoki o'ng chetidan (o'ngdan chapga) bo'lishi mumkin.

Vertikal yo'nalish

Ustun konstruktoridagi verticalDirection parametri elementlarning vertikal yo‘nalishini belgilaydi: yuqoridan pastgacha yoki pastdan tepaga. Bu parametr VerticalDirection sinfini ifodalaydi, u quyidagi konstantalarni belgilaydi:
VerticalDirection.down: yuqoridan pastga joylashish
VerticalDirection.up: joylashuv pastdan yuqoriga
Masalan, pastdan yuqoriga joylashtirish:

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

import 'package:flutter/material.dart';   void main() {   runApp(Container(     padding: EdgeInsets.all(30),     color: Colors.teal,     child:Column(         textDirection: TextDirection.ltr,         crossAxisAlignment: CrossAxisAlignment.start,         verticalDirection: VerticalDirection.up,         children: [           Text('Вот мысль, которой весь я предан,',               textDirection: TextDirection.ltr),           Text('Итог всего, что ум скопил.',               textDirection: TextDirection.ltr),           Text('Лишь тот, кем бой за жизнь изведан,',               textDirection: TextDirection.ltr),           Text('Жизнь и свободу заслужил.',               textDirection: TextDirection.ltr)         ],       )     )   ); }

Main AxisAlignment

Ustun konstruktorining yana bir parametri mainAxisAlignment MainAxisAlignment sinfini ifodalaydi va vertikal tekislashni boshqaradi. U quyidagi qiymatlarni qabul qilishi mumkin:
MainAxisAlignment.center: vertikal markazni tekislash
MainAxisAlignment.end: vertikal o'qning oxirida tekislash. Vertikal o'qning oxiri qayerda bo'lishi boshqa konstruktor parametriga, verticalDirectionga bog'liq. Agar u VerticalDirection.down ga teng bo'lsa (vidjetlarning yuqoridan pastgacha joylashishi), vertikal o'qning oxiri pastki qism bilan bir xil bo'ladi va VerticalDirection.up qiymati vertikal o'qning yuqori qismida bo'lsa.

MainAxisAlignment.start: vertikal o'qning boshida tekislash. MainAxisAlignment.endga o'xshab, vertikal o'qning "boshlash" joyi verticalDirection parametrining qiymatiga bog'liq.

MainAxisAlignment.spaceBetween: Ustun bo'sh joy o'rnatilgan vidjetlar orasida teng taqsimlangan
MainAxisAlignment.spaceEvenly: Ustun bo'sh joy ichki o'rnatilgan vidjetlar o'rtasida, shuningdek, birinchi va oxirgi vidjetdan keyin teng taqsimlanadi.

MainAxisAlignment.spaceAround: Ustun bo'sh joy ichki o'rnatilgan vidjetlar o'rtasida teng taqsimlanadi, bundan tashqari, birinchi va oxirgi vidjetdan oldin yarim to'ldirish qo'shiladi (vidjetlar orasidagi to'ldirishning yarmi)

Masalan, o'rnatilgan vidjetlarni vertikal ravishda markazga joylashtiramiz:

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

import 'package:flutter/material.dart';   void main() {   runApp(Container(     padding: EdgeInsets.only(top:30, left:10),     color: Colors.teal,     child:Column(         textDirection: TextDirection.ltr,         crossAxisAlignment: CrossAxisAlignment.start,         mainAxisAlignment: MainAxisAlignment.center,         children: [           Text('Вот мысль, которой весь я предан,',               textDirection: TextDirection.ltr),           Text('Итог всего, что ум скопил.',               textDirection: TextDirection.ltr),           Text('Лишь тот, кем бой за жизнь изведан,',               textDirection: TextDirection.ltr),           Text('Жизнь и свободу заслужил.',               textDirection: TextDirection.ltr)         ],       )     )   ); }

SpaceBetween, spaceEvenly va spaceAround qiymatlaridan foydalanishga misol:

TextBaseline

Tegishlash uchun Ustun konstruktoridagi textBaseline parametridan foydalaniladi. Bu parametr quyidagi TextBaseline sanab qiymatlarini qabul qilishi mumkin:
TextBaseline.alphabetic: Alfavit belgilariga tekislash qo'llaniladi.
TextBaseline.ideographic: Hizalama ideografik belgilarga qo'llaniladi.

Row

Row vidjeti elementlarni gorizontal ravishda qatorga joylashtiradi.
Qator vidjetini yaratish uchun quyidagi konstruktordan foydalaniladi:

1 2 3

Row({Key key, MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, MainAxisSize mainAxisSize: MainAxisSize.max, CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, TextDirection textDirection, VerticalDirection verticalDirection: VerticalDirection.down, TextBaseline textBaseline, List children: const []})

Uning parametrlari:

kalit: vidjet kaliti
mainAxisAlignment: gorizontal tekislashni o'rnatadi
mainAxisSize: vidjet egallagan gorizontal joyni oʻrnatadi
crossAxisAlignment: Vertikal tekislashni belgilaydi
textDirection: ichki joylashtirilgan elementlarning gorizontal tartibini belgilaydi
verticalDirection: ichki joylashtirilgan elementlarning vertikal tartibini aniqlaydi
textBaseline: elementlarni tekislash uchun asosiy chiziqni o'rnatadi
bolalar: ichki o'rnatilgan elementlar to'plami
Keling, Matn vidjetlari to‘plamini o‘z ichiga oladigan Qator vidjetini aniqlaymiz:

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(Container(     padding: EdgeInsets.all(30),     color: Colors.teal,     child:Row(         textDirection: TextDirection.ltr,         children: [           Text('Tom',               textDirection: TextDirection.ltr),           Text('Bob',               textDirection: TextDirection.ltr),           Text('Sam',               textDirection: TextDirection.ltr),           Text('Alice',               textDirection: TextDirection.ltr)         ],       )     )   ); }

Ko'rishimiz mumkinki, sukut bo'yicha Qator elementi barcha ichki o'rnatilgan vidjetlarni vertikal markazga va gorizontal chapga joylashtiradi. Bundan tashqari, barcha o'rnatilgan vidjetlar bir-biriga yaqin.

Main AxisAlignment

Konstruktorning mainAxisAlignment parametri ichki joylashtirilgan elementlarning gorizontal joylashuvini sozlash imkonini beradi. U MainAxisAlignment turini ifodalaydi va quyidagi qiymatlarni qabul qilishi mumkin:

MainAxisAlignment.center: markazga gorizontal tekislash
MainAxisAlignment.end: gorizontal o'q oxirida tekislash. Gorizontal o'qning oxiri joylashgan joy boshqa konstruktor parametriga, textDirectionga bog'liq. Agar u TextDirection.ltr ga (matn chapdan o'ngga) teng bo'lsa, gorizontal o'qning oxiri o'ng qirra bilan bir xil bo'ladi va qiymat TextDirection.rtl bo'lsa, oxiri chap qirra bilan bir xil bo'ladi.
MainAxisAlignment.start: vertikal o'qning boshida tekislash. MainAxisAlignment.endga o'xshab, gorizontal o'qning "boshlanishi" ning joylashuvi textDirection parametrining qiymatiga bog'liq.

MainAxisAlignment.spaceBetween: Qator bo'sh joy ichki o'rnatilgan vidjetlar orasida teng taqsimlanadi

MainAxisAlignment.spaceEvenly: Qator bo'sh joy ichki o'rnatilgan vidjetlar o'rtasida, shuningdek, birinchi va oxirgi vidjetdan keyin teng taqsimlanadi.
MainAxisAlignment.spaceAround: Qator bo'sh joy ichki o'rnatilgan vidjetlar o'rtasida teng taqsimlanadi, bundan tashqari, birinchi va oxirgi vidjetdan oldin yarim to'ldirish qo'shiladi (vidjetlar orasidagi to'ldirishning yarmi)

Masalan, elementlar orasiga bir-biri bilan qo‘shilmasligi uchun to‘ldirishni o‘rnatamiz:

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(     padding: EdgeInsets.all(30),     color: Colors.teal,     child:Row(         textDirection: TextDirection.ltr,         mainAxisAlignment: MainAxisAlignment.spaceEvenly,         children: [           Text('Tom',               textDirection: TextDirection.ltr),           Text('Bob',               textDirection: TextDirection.ltr),           Text('Sam',               textDirection: TextDirection.ltr),           Text('Alice',               textDirection: TextDirection.ltr)         ],       )     )   ); }

Cross AxisAlignment

Row konstruktoridagi crossAxisAlignment parametri ichki o'rnatilgan vidjetlar vertikal ravishda qanday joylashishini belgilaydi. Bu parametr CrossAxisAlignment sinfini ifodalaydi va quyidagi qiymatlarni qabul qilishi mumkin:
CrossAxisAlignment.center: Birlamchi, ichki joylashtirilgan elementlarni vertikal ravishda markazlashtiradi. Bu standart.
CrossAxisAlignment.end: ichki o'rnatilgan elementlarni vertikal o'qning oxiriga joylashtiradi. Bu qiymat Row konstruktorining verticalDirection boshqa parametriga bog'liq. Agar u VerticalDirection.down (yuqoridan pastga) bo'lsa, u holda elementlar pastga tekislanadi. Va agar u VerticalDirection.up ga teng bo'lsa (pastdan yuqoriga), u holda elementlar yuqoriga tekislanadi.

CrossAxisAlignment.start: Ichki elementlarni vertikal o'qning boshida joylashtiradi. Uning qiymati, CrossAxisAlignment.end kabi, verticalDirection konstruktorining parametriga bog'liq. Agar u VerticalDirection.down (yuqoridan pastga) bo'lsa, unda elementlar yuqoriga tekislanadi. Va agar u VerticalDirection.up ga teng bo'lsa (pastdan yuqoriga), u holda elementlar pastga tekislanadi.

CrossAxisAlignment.stretch: O'rnatilgan elementlarni Row konteynerining to'liq kengligigacha uzaytiradi.
CrossAxisAlignment.baseline: Ichki elementlarni asosiy chiziqqa - kesishuvchi o'qga tekislaydi. CrossAxisAlignment (4) bilan bir xil. textBaseline parametrini o'rnatishni talab qiladi

Birinchi misolda, skrinshotdan ko'rinib turibdiki, CrossAxisAlignment.center sukut bo'yicha ishlatiladi, ya'ni barcha ichki o'rnatilgan vidjetlar markazlashtirilgan. Buning o'rniga biz vidjetlarni tepaga joylashtiramiz:

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

import 'package:flutter/material.dart';   void main() {   runApp(Container(     padding: EdgeInsets.all(30),     color: Colors.teal,     child:Row(         textDirection: TextDirection.ltr,         crossAxisAlignment: CrossAxisAlignment.start,         verticalDirection: VerticalDirection.down,         mainAxisAlignment: MainAxisAlignment.spaceEvenly,         children: [           Text('Tom',               textDirection: TextDirection.ltr),           Text('Bob',               textDirection: TextDirection.ltr),           Text('Sam',               textDirection: TextDirection.ltr),           Text('Alice',               textDirection: TextDirection.ltr)         ],       )     )   ); }