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.