Loading...

Container

Container

         Container мындай виджетти билдирет, ал ошондой эле бир гана уяланган элементти камтышы мүмкүн, бирок ошол эле учурда фонду, жайгаштыруу жана уя салынган виджеттердин өлчөмүн орнотуу үчүн кошумча опцияларды берет. Чынында, Container башка виджеттердин мүмкүнчүлүктөрүн айкалыштырат - Padding, Align, ConstrainedBox.

         Контейнер конструктору дисплейдин айрым аспектилерин ыңгайлаштырууга мүмкүндүк берген бир нече параметрлерди кабыл алат:

Container({Key key, AlignmentGeometry alignment, EdgeInsetsGeometry padding, Color color, Decoration decoration,})

key : элемент ачкычы

         alignment: Align виджетиндеги тегиздөө жөндөмүнө окшош AlignmentGeometry объектиси катары элемент үчүн тегиздөө орнотуулат.

         Padding: виджетиндеги толтуруу жөндөөсүнө окшош контейнердин чектеринен салынган элемент үчүн толтуруу орнотуулат

         color : Контейнерге түс берүүчү болуп саналат.

         constraints : Узундук жана тууралык чектөөлөр, салынган виджетке колдонулган BoxConstraints объекти түрүндөгү. ConstrainedBox ичиндеги өлчөмдөрдү орнотууга окшош.

         margin : учурдагы Container виджетинин толтуруу параметрин орнотууга окшош тышкы контейнердин чектеринен орнотот

         width : контейнердин туурасын өзгөртөт

         heigt : контейнердин бийиктигини өзгөртөт

 Жөнөкөй Container виджетин түзөлү:

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

        )

      )

  );

}

         Бул учурда, маани менен сүрөттөлгөн камтылган түс (ачык көк түс) түс катары колдонулат Colors.lightBlueAccent. Тегиздөө маанисин колдонуу менен салынган виджетти борборлош үчүн коюлган Alignment.center.

чектер жана толтуруу

         Эми margin аркылуу аралык жана padding аркылуу колдонууну карап көрөлү:

 

 

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 ',

          textDirection: TextDirection.ltr

        )

      )

  );

}

 

         Бул учурда, margin үчүн маани жогорудан 30 бирдикке коюлат. Башкача айтканда, Container виджети экрандын жогору жагында 30 бирдик төмөн жайгаштырылат. Ошондуктан, смартфондун экранынын жогору жагында Контейнер виджети менен толтурулбаган кара тилкени көрөбүз.      Ошондой эле  салынган Тext виджети үчүн Conteiner виджетине карата  аралыкты карай, 40 бирдикке орнотуңуз.