Loading...

Stack

Stack

         Stack контейнери кээ бир элементтерди башкалардын үстүнө коюуга мүмкүндүк берет.

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

Анын параметрлери болуп төмөнкүлөр саналат:

         alignment: салынган виджеттердин ордун көрсөтөт.

         textDirection: салынган элементтердин горизонталдуу тартибин аныктайт.

         fit: салынган виджеттердин өлчөмдөрүн аныктайт.

         overflow: мазмундун кыскартылышы керекпи же жокпу белгилейт.

         clipBehavior: салынган элементтер кантип кыскартыларын белгилейт.

         children: элементтердин жыйындысы.

         Стекти колдонуу менен виджеттерди бири-биринин үстүнө жайгаштырууну төмөнкү сүрөттө көрсөңүз боло: Үлгү чоңураак жашыл кутучаны каптаган көк кутучаны түзөт, ал өзү андан да чоңураак кызыл кутучаны капташат.

Stack(

  children: <Widget>[

    Container(

      width: 100,

      height: 100,

      color: Colors.red,

    ),

    Container(

      width: 90,

      height: 90,

      color: Colors.green,

    ),

    Container(

      width: 80,

      height: 80,

      color: Colors.blue,

    ),

  ],

)

         Демейки боюнча, салынган виджеттер Stack элементинин жогорку сол бурчунда жайгаштырылат (демейки боюнча, тегиздөө касиети деп коюлган AlignmentDirectional.topStart), бирок, табигый түрдө, түрү чагылдырган тегиздөө касиети менен,

         AlignmentGeometr салынган виджеттердин абалын жокко чыгара алабыз. төмөнкү баалуулуктардын:

         AlignmentDirectional.topStart : элементтин башында тегиздөө (эгерде тексттин ориентациясы солдон оңго болсо, башталышы - сол чек, текст оңдон солго багытталган болсо, башталышы - оң чек)

         AlignmentDirectional.topEnd : элементтин үстүнкү тегиздөө (эгерде тексттин багыты солдон оңго болсо, текст оңдон солго багытталган болсо, башталышы - сол чек)

 

AlignmentDirectional.topCenter : жогорку ортого тегизделет.

AlignmentDirectional.bottomStart : элементтин башында ылдый карай тегизделет.

AlignmentDirectional.bottomEnd : элементтин аягындагы төмөн карай тегиздөө.

AlignmentDirectional.bottomCenter : астыңкы бөлүктү ортого тегиздөө.

 

 

 

 

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

Alignment.centerStart : контейнердин башында борборго тегиздөө.

 

Alignment.centerEnd : контейнердин аягындагы борборго тегиздөө.

Мисалы, виджеттерди борборго жайгаштыралы:

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: <Widget>[

        Container(

          width: 240,

          height: 240,

          color: Colors.blueGrey,

        ),

        Container(

          width: 220,

          height: 220,

          color: Colors.black12,

        ),

        Text("Flutter ",

           textDirection: TextDirection.ltr,

          softWrap: true,

          style: TextStyle(fontSize: 20),

      ),  ], ), ), ); }