Loading...
Column
Column
Column элементтерди вертикалдуу, мамыча түрүндө жайгаштырат.
Виджетти түзүү үчүн төмөнкү конструктор колдонулат:
key: виджет ачкычы.
mainAxisAlignment: вертикалдуу тегиздөөнү орнотот.
mainAxisSize: негизги огу боюнча виджет ээлеген мейкиндикти орнотот.
crossAxisAlignment: горизонталдуу тегиздөөнү орнотот.
textDirection: салынган элементтердин горизонталдуу тартибин аныктайт.
verticalDirection: салынган элементтердин вертикалдуу тартибин аныктайт.
textBaseline: элементтерди тегиздөө үчүн негизги сызыкты орнотот
children: элементтердин жыйындысы.
Эң жөнөкөй Мамыча виджети:
import 'package:flutter/material.dart';
void main() {
runApp(Container(
padding: EdgeInsets.all(30),
color: Colors.teal,
child:Column(
children: <Widget>[
Text('Мына мен бардыгын арнаган оо,',
textDirection: TextDirection.ltr),
Text(Акыл топтогон нерселердин бардыгынын жыйындысы.',
textDirection: TextDirection.ltr),
Text('Өмүр үчүн күрөштү башынан өткөргөн адам гана,',
textDirection: TextDirection.ltr),
Text(Жашоо жана эркиндик татыктуу.',
textDirection: TextDirection.ltr)
], ), ), ); }
Мамыча виджети жылдырууну колдобой турганын эске алыңыз. Ошондуктан, эгерде көрүнүүчү мейкиндиктин чегинен чыккан виджеттерге кирүү мүмкүнчүлүгүн камсыз кылуу зарыл болсо, анда Мамычанын ордуна башка контейнерди, мисалы, ListView колдонгон жакшы.
CrossAxisAlignment
Column конструкторундагы параметр crossAxisAlignmentу салынган виджеттердин кесилишкен огу боюнча - бул учурда горизонталдуу түрдө кандай жайгашаарын аныктайт. Бул параметр төмөнкү маанилерди кабыл алышы мүмкүн:
CrossAxisAlignment.center : Демейки маани, элементтерди туурасынан ортого жайгаштыруу. Аналогия түшүнүгүнө окшош CrossAxisAlignment.
CrossAxisAlignment.end : элементтерди горизонталдык октун аягында жайгаштырат. Column, эгерде конструктордун башка параметри textDirection бирдей болсо TextDirection.ltr, анда элементтер оңго тегизделген.
Ал эми бирдей болсо TextDirection.rtl, анда элементтер солго тегизделген. Аналогияга окшош CrossAxisAlignment.
CrossAxisAlignment.start : элементтерди кайчылаш октун башына жайгаштырат. Мамычада, эгерде конструктордун башка параметри textDirectionбирдей болсо TextDirection.ltr, анда элементтер солго тегизделген. Баалоого окшош CrossAxisAlignment.
CrossAxisAlignment.stretch : элементтерди Мамыча контейнеринин толук туурасы боюнча созулат.
CrossAxisAlignment.baseline : Негизги сызык боюнча элементтерди Column - кайчылаш огу. Column контейнери үчүн, бул маани менен эффективдүү бирдей CrossAxisAlignment.start. textBaseline орнотулушун талап кылынат.
үчүн Align же Борборду колдонуңуз .
Бул мисал үч виджетти вертикалдуу жайгаштыруу үчүн
Column колдонот , акыркысы бардык калган бош орундарды толтуруу үчүн жасалат.
Column(
children: <Widget>[
Text('Deliver features faster'),
Text('Craft beautiful UIs'),
Expanded(
child: FittedBox(
child: FlutterLogo(),
), ), ], )
Жогорудагы үлгүдө текст жана логотип ар бир саптын ортосуна жайгаштырылат.
Төмөнкү мисалда, crossAxisAlignment CrossAxisAlignment.start деп коюлган , ошондуктан солго тегизделген. mainAxisSize MainAxisSize.min деп коюлган , ошондуктан Column туура келүү үчүн кичирейет .
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('We move under cover and we move as one'),
const Text('Through the night, we have one shot to live another day'),
const Text('We cannot let a stray gunshot give us away'),
const Text('We will fight up close, seize the moment and stay in it'),
const Text('It’s either that or meet the business end of a bayonet'),
const Text('The code word is ‘Rochambeau,’ dig me?'),
Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)),
], ),
MainAxisAlignment
Column конструкторунун дагы бир параметри - MainAxisAlignmentmainAxisAlignment классын билдирет жана вертикалдуу тегиздөөнү көзөмөлдөйт. Ал төмөнкү маанилерди алат:
MainAxisAlignment.center : вертикалдуу тегиздөө.
MainAxisAlignment.end : Вертикалдык огтун аягындагы тегиздөө. Тик октун аягы башка конструктор параметрине көз каранды болгон жерде - verticalDirection. Эгерде ал барабар болсо VerticalDirection.down(виджеттердин орду жогорудан ылдыйга карай), вертикалдык огтун аягы ылдыйкыга окшош, ал эми барабар болсо VerticalDirection.up, вертикалдык огтун жогору жагында болот.
MainAxisAlignment.start : вертикалдык огтун башталышында тегиздөө. Ошо сыяктуу эле, MainAxisAlignment.end вертикалдык октун "башталгычынын" орду параметрдин маанисине жараша болот verticalDirection
MainAxisAlignment.spaceBetween : Мамычанын бош мейкиндиги салынган виджеттердин арасында бирдей бөлүштүрүлгөн
MainAxisAlignment.spaceEvenly : Мамычанын бош мейкиндиги салынган виджеттердин ортосунда жана биринчи жана акыркы виджеттин алдында бирдей бөлүштүрүлөт
MainAxisAlignment.spaceAround : Мамычанын бош мейкиндиги салынган виджеттердин ортосунда бирдей бөлүштүрүлөт, андан тышкары, жарым толтуруу биринчи жана акыркы виджеттен кийин кошулат (виджеттердин ортосундагы толтуруунун жарымы).
textBaseline Тегиздөө үчүн Колонна конструкторундагы параметр колдонулат. Бул параметр төмөнкү TextBaseline маанилерин ала алат :
TextBaseline.alphabetic : Негиздөө алфавиттик белгилерге колдонулат.
TextBaseline.ideographic : Негиздөө идеографиялык белгилерге колдонулат.