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

Stack

Stack konteyneri sizga elementlarni boshqalarning ustiga joylashtirish imkonini beradi.

Stack vidjetini yaratish uchun quyidagi konstruktordan foydalaniladi:

1 2 3

Stack({Key key, AlignmentGeometry alignment: AlignmentDirectional.topStart, TextDirection textDirection, StackFit fit: StackFit.loose, Overflow overflow: Overflow.clip, Clip clipBehavior: Clip.hardEdge, List children: const []})

Uning parametrlari:

kalit: vidjet kaliti

hizalama: ichki o'rnatilgan vidjetlar o'rnini o'rnatadi

textDirection: ichki joylashtirilgan elementlarning gorizontal tartibini belgilaydi

mos: o'rnatilgan vidjetlar uchun o'lchamlarni belgilaydi

overflow: ichki o'rnatilgan kontentni kesish yoki kesish kerakligini belgilaydi

clipBehavior: ichki oʻrnatilgan elementlar qanday qilib kesilishini belgilaydi

bolalar: ichki o'rnatilgan elementlar to'plami

Konteyner vidjetlari to‘plamini o‘z ichiga oladigan Stack vidjetini 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 28 29

import 'package:flutter/material.dart'; void main() { runApp(Container( color: Colors.white, padding: EdgeInsets.only(top:40, bottom: 10, left: 20, right: 20), child: Stack( textDirection: TextDirection.ltr, children: [ Container( width: 200, height: 200, color: Colors.blueGrey, ), Container( width: 160, height: 160, color: Colors.cyan, ), Container( width: 100, height: 100, color: Colors.blue, ), ], ) ) ); }

Bunday holda, Stack uchta konteyner elementini o'z ichiga oladi, ular ketma-ket bir-birining ustiga qo'yiladi.

Shuni ta'kidlash kerakki, bu holda textDirection xususiyatini ham o'rnatish kerak

Odatiy bo'lib, ichki o'rnatilgan vidjetlar Stack elementining yuqori chap burchagida joylashgan (sukut bo'yicha alignment xususiyati AlignmentDirectional.topStart ga o'rnatiladi), lekin tabiiyki, AlignmentGeometry turini ifodalovchi alignment xususiyatidan foydalanib, biz pozitsiyani bekor qilishimiz mumkin. quyidagi qiymatlardan biriga ega ichki vidjetlar:

AlignmentDirectional.topStart: element boshida yuqori tekislash (agar matn yo'nalishi chapdan o'ngga bo'lsa, boshlang'ich chap chegara, matn o'ngdan chapga yo'naltirilganda, boshlang'ich o'ng chegara hisoblanadi)

AlignmentDirectional.topEnd: element oxirida yuqori tekislash (agar matn yo'nalishi chapdan o'ngga bo'lsa, boshlang'ich o'ng chegara bo'ladi, matn o'ngdan chapga bo'lsa, boshlang'ich chap chegara hisoblanadi)

AlignmentDirectional.topCenter: yuqori markazga tekislash

<
AlignmentDirectional.bottomStart: Element boshida pastki tekislash

AlignmentDirectional.bottomEnd: Element oxiridagi pastki tekislash

AlignmentDirectional.bottomCenter: pastki markazni tekislash

li>

AlignmentDirectional.center: markazga gorizontal va vertikal tekislash.

Alignment.centerStart: konteyner boshida markazga tekislash

Alignment.centerEnd: konteyner oxirida markazga tekislash

Masalan, vidjetlarni 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 25 26 27 28 29 30 31

import 'package:flutter/material.dart'; void main() { runApp(Container( color: Colors.white, padding: EdgeInsets.only(top:40, bottom: 10, left: 20, right: 20), child: Stack( alignment: AlignmentDirectional.center, textDirection: TextDirection.ltr, children: [ Container( width: 240, height: 240, color: Colors.blueGrey, ), Container( width: 220, height: 220, color: Colors.black12, ), Text("Flutter на metanit.com", textDirection: TextDirection.ltr, softWrap: true, style: TextStyle(fontSize: 20), ), ], ) ) ); }

Joylashtirilgan vidjet

Yuqoridagi misollarda ichki o'rnatilgan vidjetlarning joylashuvi hizalama xususiyati bilan aniqlangan. Bundan tashqari, biz har bir ichki o'rnatilgan element uchun joylashuvni aniq belgilash uchun Positioned vidjetidan foydalanishimiz mumkin.

Ushbu vidjetni yaratish uchun quyidagi konstruktorlardan birini ishlating:

Positioned.directional ({Key key key, @required TextDirection textDirection, double start, double top, double end, double tub, double en, double height, @required Widget child}): parametrlarni o‘rnatish orqali ichki o‘rnatilgan vidjet o‘rnini belgilaydi:

start: elementning boshlanishi (matn chapdan o'ngga yo'naltirilganda chap chegara va matn o'ngdan chapga yo'naltirilganda o'ng chegara

end: elementning oxiri (matn chapdan o'ngga yo'naltirilganda o'ng chegara va matn o'ngdan chapga yo'naltirilganda chap chegara

tepa: elementning yuqori chegarasi

pastki: elementning pastki chegarasi

kenglik: o'rnatilgan elementning kengligi

balandlik: o'rnatilgan elementning balandligi

Positioned.fill ({Kalit tugmasi, ikki chap: 0,0, ikkita yuqori: 0,0, ikki tomonlama o'ng: 0,0, ikkita pastki: 0,0, @required Vidjet bolasi}): parametrlarni o'rnatish orqali ichki o'rnatilgan vidjetning joylashishini aniqlaydi:

chap: elementning chap chegarasi

o'ng: elementning o'ng chegarasi

tepa: elementning yuqori chegarasi

pastki: elementning pastki chegarasi

kenglik: o'rnatilgan elementning kengligi

balandlik: o'rnatilgan elementning balandligi

Positioned.fromRect ({Key key, Rect rect, @required Widget child}): o‘rnatilgan elementning joylashuvi va o‘lchami Rect obyekti yordamida o‘rnatiladi.

Positioned.fromRelativeRect ({Key key, RelativeRect rect, @required Widget child}): o‘rnatilgan elementning joylashuvi va o‘lchami RelativeRect obyekti yordamida o‘rnatiladi.

Masalan, Matn vidjetini Positioned-ga qo'ying:

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(Container( color: Colors.white, padding: EdgeInsets.only(top:40, bottom: 10, left: 20, right: 20), child: Stack( alignment: AlignmentDirectional.center, textDirection: TextDirection.ltr, children: [ Container( width: 240, height: 240, color: Colors.blueGrey, ), Container( width: 220, height: 220, color: Colors.black12, ), Positioned( top: 50, left: 50, child: Text("Flutter на metanit.com", textDirection: TextDirection.ltr, softWrap: true, style: TextStyle(fontSize: 20, color: Colors.redAccent), ), ) , ], ) ) ); }

Bunday holda, Matn vidjeti mos ravishda Stack konteynerining yuqori va chap chegaralaridan 20 birlik pastga va o'ngga joylashtiriladi.

StackFit
Fit xususiyati Stack konteynerini to'ldirish tartibini belgilaydi. Bu StackFit ro'yxatining qiymatlaridan birini oladi:

StackFit.loosen: ichki o'rnatilgan vidjetlar konteyner hajmidan oshmaydigan har qanday hajmni oladi. Standart qiymat. StackFit qiymati (0) / kod> ga mos keladi

StackFit.expand: O'rnatilgan vidjetlar mavjud bo'lgan eng katta o'lchamlarni oladi. StackFit qiymatiga mos keladi (1)

Misol uchun, StackFit.expand yordamida ichkariga o'rnatilgan konteyner vidjetini Stack konteynerining to'liq uzunligi va kengligigacha uzaytiramiz:

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(Container( color: Colors.white, padding: EdgeInsets.only(top:40, bottom: 10, left: 20, right: 20), child: Stack( alignment: AlignmentDirectional.center, textDirection: TextDirection.ltr, fit: StackFit.expand, children: [ Container( width: 240, height: 240, color: Colors.blueGrey, ), Container( width: 200, height: 200, color: Colors.redAccent, ) , ], ) ) ); }

Bundan tashqari, ikkita konteyner elementi mavjudligiga qaramay, ikkalasi ham mos ravishda bir xil balandlik va kenglikni oladi, biz faqat bitta vidjetni ko'ramiz.