Align

Align

Align виджети контейнердин белгилүү бир тарабына карата элементти жайгаштырууга мүмкүндүк берет. Баштапкы абалы боюнча, ал контейнердин экрандын кеңдигине жана бийиктигине созулуп, анын бардык мейкиндигин толтурат.

Виджетти түзүү үчүн төмөнкү конструктор колдонулат:

@A@Align({Key key, AlignmentGeometry alignment: Alignment.center, double widthFactor, double heightFactor, Widget child})@A@

Конструктордун кол тамгасынан көрүнүп тургандай, анын бардык параметрлери милдеттүү эмес. Контейнердин белгилүү бир четине тегиздөө колдонула турган, жайгашкан элементти коюу үчүн, child параметр колдонулат - ал каалаган Виджет объектиси, башкача айтканда, каалаган виджет болушу мүмкүн.

widthFactor жана heightFactor кошумча параметрлери жылуучу  элементке карата Center виджетинин туурасына жана бийиктигине карай өзгөрүү коэффициенти болуп саналат. Мисалы, widthFactor 2.0 болсо, анда  Center виджетинин туурасы элементтин туурасынан 2.0 эсе көп болот. Ошол эле бийиктикти өзгөртөт, бийиктикти өзгөртө алат.

 

Alignment AlignmentGeometry классын билдирген жана төмөнкү маанилерди кабыл ала турган alignment параметринин жардамы менен коюлат :     

Alignment.bottomCenter : туурасынан борборлоштурулган. Alignment(0.0, 1.0)

Alignment.bottomLeft : горизонталдуу жагынан солго карай тегиздөө, Alignment(-1.0, 1.0)

Alignment.bottomRight : туурасынан оңго карай тегиздөө.

 Alignment(1.0, 1.0)

Alignment.center : горизонталдуу жана вертикалдуу тарабынан борборго карай тегиздөө.             

Alignment(0.0, 0.0)

Alignment.centerLeft : туурасынан солго карай тегизделген.

Alignment(-1.0, 0.0)

Alignment.centerRight : туурасынан оңго тегиздөө, контейнердин ортосуна вертикалдуу тегиздөө.

Alignment(1.0, 0.0)

Alignment.topCenter : туурасынан борборлоштурулган.

Alignment(0.0, -1.0)

Alignment.topLeft : горизонтал жагынан солго карай тегиздөө, Alignment(-1.0, -1.0)

Alignment.topRight : туурасынан оңго карай тегиздөө.

Alignment(1.0, -1.0)

Бул мисалдагы Align виджети Alignment , Alignment.topRight дан аныкталган константалардын бирин колдонот . Бул FlutterLogo'ну көк түстөгү контейнердин жогорку оң бурчунда жайгаштырат . Текстти жайгаштыруу үчүн биз Align виджетин колдонобуз, мисалы, сол жактын ортосуна жайгаштырабыз:

 

 

@A@

import 'package:flutter/material.dart';

 

void main() {

  runApp(Align(

    alignment: Alignment.centerLeft,

      child:Text(

      'Солжактын ортосуна жайгашуусу !',

      textDirection: TextDirection.ltr,  

      style: TextStyle(fontSize: 24) // шрифтин бийиктиги 24

    ), ), ); }

 

@A@

 

FractionalOffset

FractionalOffset классы Alignment классынан келип чыккан жана элементтин жайгашуусу үчүн кошумча опцияларды камсыз кылат. Анын төмөнкү конструктору бар:

FractionalOffset(double dx, double dy)мында dx горизонталдык жана dy - вертикалдуу жылышуу. Параметирлер 0,0дөн 1,0го чейинки бөлчөктөр менен көрсөтүлөт, мисалы,  FractionalOffset(1.0, 0.0)аркылуу контейнердин жогорку оң бурчун, ал эми FractionalOffset(0.0, 1.0)төмөнкү сол бурчун билдирет. Демек FractionalOffset(0.5, 0.5), бул борбор (горизонталдуу жана вертикалдуу). Керектүү параметирди көрсөтүү менен, биз элементти контейнердин белгилүү бир бөлүгүнө жайгаштыра алабыз.

 Мисалы:

 

@A@

import 'package:flutter/material.dart';

 

void main() {

  runApp(Align(

      alignment: FractionalOffset(0.2, 0.3),

      child:Text(

      'Hello Flutter',

      textDirection: TextDirection.ltr,  

        style: TextStyle(fontSize: 20) // шрифтин бийиктиги 20

    ), 

 ), 

);

}@A@

Мааниси FractionalOffset(0.2, 0.3)  Текст элементинин жогорку бурчу төмөнкү координаттарда болорун аныктайт: X = container_Align_width * 0,2, Y = container_Align_height * 0,3.