В Flutter виджеты «Столбец» и «Стек» — это мощные инструменты для создания гибких и динамических пользовательских интерфейсов. Они предоставляют разные подходы к организации и размещению виджетов по вертикали или горизонтали. В этой статье мы рассмотрим различные методы использования виджетов «Столбец» и «Стек», а также примеры кода.
- Использование виджета «Столбец».
Виджет «Столбец» позволяет размещать виджеты вертикально. Вот пример использования виджета «Столбец»:
Column(
children: <Widget>[
Text('Widget 1'),
Text('Widget 2'),
Text('Widget 3'),
],
)
- Использование виджета «Стек».
Виджет «Стек» позволяет размещать виджеты друг на друге. Вот пример использования виджета «Стек»:
Stack(
children: <Widget>[
Container(color: Colors.red, height: 100, width: 100),
Container(color: Colors.green, height: 75, width: 75),
Container(color: Colors.blue, height: 50, width: 50),
],
)
- Выравнивание виджетов в столбце.
Вы можете выровнять виджеты внутри столбца, используя свойстваcrossAxisAlignmentиmainAxisAlignment. Вот пример:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Widget 1'),
Text('Widget 2'),
Text('Widget 3'),
],
)
- Перекрытие виджетов в стопке.
Вы можете расположить виджеты в стопке с помощью виджетаPositioned. Вот пример:
Stack(
children: <Widget>[
Positioned(
top: 10,
left: 10,
child: Container(color: Colors.red, height: 100, width: 100),
),
Positioned(
top: 30,
left: 30,
child: Container(color: Colors.green, height: 75, width: 75),
),
Positioned(
top: 50,
left: 50,
child: Container(color: Colors.blue, height: 50, width: 50),
),
],
)
В этой статье мы рассмотрели различные методы использования виджетов «Столбец» и «Стек» во Flutter. Мы узнали, как складывать виджеты вертикально с помощью Column и как складывать виджеты друг на друга с помощью Stack. Мы также увидели, как выравнивать виджеты внутри столбца и размещать виджеты в стеке. Используя эти мощные виджеты, вы можете создавать динамичные и визуально привлекательные пользовательские интерфейсы в своих приложениях Flutter.