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

Container

Konteyner shunday vidjetni ifodalaydi, u faqat bitta ichki elementni o'z ichiga olishi mumkin, lekin ayni paytda ichki vidjetlarning fonini, joylashishini va hajmini o'rnatish uchun qo'shimcha imkoniyatlarni taqdim etadi. Aslida, Konteyner boshqa vidjetlarning imkoniyatlarini birlashtiradi - Padding, Align, ConstrainedBox.

Konteyner konstruktori displeyning ma'lum jihatlarini sozlash imkonini beruvchi bir nechta parametrlarni oladi:

1 2 3

Container({Key key, AlignmentGeometry alignment, EdgeInsetsGeometry padding, Color color, Decoration decoration, Decoration foregroundDecoration, double width, double height, BoxConstraints constraints, EdgeInsetsGeometry margin, Matrix4 transform, Widget child, Clip clipBehavior: Clip.none})

Keling, ba'zi parametrlarni ko'rib chiqaylik:

kalit: buyumning kaliti

alignment: Align vidjetidagi tekislash sozlamasiga o'xshash AlignmentGeometry ob'ekti sifatida o'rnatilgan elementni tekislash sozlamalari

to'ldirish: Padding vidjetidagi to'ldirishni o'rnatishga o'xshash konteyner chegaralaridan ichki o'rnatilgan elementni to'ldirishni o'rnatish

rang: idishning rangi

cheklovlar: BoxConstraints ob'ekt uzunligi va kengligi cheklovlari ichki o'rnatilgan vidjetga qo'llaniladi. ConstrainedBox-da o'lchamlarni o'rnatishga o'xshash

margin: joriy Konteyner vidjetining chetlarini toʻldirish parametrini oʻrnatishga oʻxshash tashqi konteyner chegaralaridan oʻrnatadi.

kenglik: idishning kengligi

balandlik: konteyner balandligi

Keling, oddiy konteyner vidjetini yarataylik:

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

import 'package:flutter/material.dart'; void main() { runApp(Container( color: Colors.lightBlueAccent, alignment: Alignment.center, child: Text( 'Hello Flutter from metanit.com', textDirection: TextDirection.ltr ) ) ); }

Bunday holda, rang sifatida Colors.lightBlueAccent qiymati bilan tavsiflangan o'rnatilgan rang (och ko'k rang soyasi) ishlatiladi. Alignment Alignment.center qiymatidan foydalangan holda o'rnatilgan vidjetni markazlashtirish uchun o'rnatiladi.

Chegaralar va to'ldirish

Keling, ikkala chekka va to'ldirish uchun to'ldirishni qo'llashni ko'rib chiqaylik:

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

import 'package:flutter/material.dart'; void main() { runApp(Container( color: Colors.lightBlue, alignment: Alignment.topLeft, padding: EdgeInsets.all(40), margin: EdgeInsets.only(top:30), child: Text( 'Hello Flutter from metanit.com', textDirection: TextDirection.ltr ) ) ); }

Bunday holda, marjaning qiymati 30 birlikdan iborat bo'shliq bilan yuqorida o'rnatiladi. Ya'ni, Konteyner vidjeti ekranning yuqori qismidan 30 birlik pastroqda joylashgan bo'ladi. Shuning uchun, smartfon ekranining yuqori qismida biz Konteyner vidjeti bilan to'ldirilmagan qora chiziqni ko'ramiz.

Bundan tashqari, konteyner chegaralariga nisbatan ichki o'rnatilgan Matn vidjeti uchun chekinish 40 birlikka o'rnatiladi.