Cодержание
Руководство Flutter Stack
View more Tutorials:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.
Facebook
В Flutter, Stack - это контейнер, который позволяет размещать свои дочерние widgets друг над другом, первый дочерний widget будет помещен внизу. Stack - это решение для экономии места приложения. Вы можете изменить порядок дочерних widgets, чтобы создать простую анимацию.
Stack складывает свои дочерние widgets по принципу: первый дочерний widget будет помещен снизу, самый новый дочерний widget будет помещен сверху. При изменении порядка дочерних widgets Stack будет перерисован. Если количество и порядок дочерних widgets постоянно меняются, каждый дочерний widget должен быть снабжен определенным и уникальным значением Key, что помогает Stack эффективно управлять дочерними widgets.
IndexedStack - это подкласс Stack. В отличие от Stack, IndexedStack отображает не более одного дочернего widget за раз, а другие дочерние widgets будут скрыты. Вы можете указать, какой дочерний widget будет отображаться через свойство index, если значение index равно null, то дочерние widgets отображаться не будут.
Stack Constructor
Stack(
{Key key,
List<Widget> children: const <Widget>[],
AlignmentGeometry alignment: AlignmentDirectional.topStart,
TextDirection textDirection,
StackFit fit: StackFit.loose,
Overflow overflow: Overflow.clip,
Clip clipBehavior: Clip.hardEdge
}
)
Вот простой пример, Stack с 3 дочерними widgets, по умолчанию они расположены в правом верхнем углу Stack, вы можете видеть, как они перекрывают друг друга:
(ex1)
Stack(
children: <Widget>[
Container(
width: 290,
height: 190,
color: Colors.green,
),
Container(
width: 250,
height: 170,
color: Colors.red,
),
Container(
width: 220,
height: 150,
color: Colors.yellow,
),
],
)
В основном, Stack минимально возможный размер, и пытается быть больше, чем все его дочерние widgets (за исключением дочерних виджетов, таких как Positioned или Transform, см. подробнее свойство overflow).
Давайте рассмотрим пример: Stack с дочерним widget максимального размера.
(ex2)
Stack(
children: <Widget>[
Container( // First child (child 1)
width: double.infinity,
height: double.infinity,
color: Colors.green,
margin: EdgeInsets.all(20)
),
Container(
width: 250,
height: 170,
color: Colors.red,
),
Container(
width: 220,
height: 150,
color: Colors.yellow,
),
],
)
Если вы хотите выровнять положение дочернего widget (of Stack), поместите его в Align.
Примечание: Если widthFactor и heightFactor не указаны, но указан child, Align будет максимально большим.
(ex3)
Stack(
children: <Widget>[
Container(
width: double.infinity,
height: double.infinity,
color: Colors.green,
margin: EdgeInsets.all(20)
),
Align (
alignment: Alignment.centerRight,
child: Container(
width: 250,
height: 170,
color: Colors.red,
),
),
Container(
width: 220,
height: 150,
color: Colors.yellow,
),
],
)
Вы также можете выровнять положение дочернего widget (Stack), поместив его в Positioned.
children - это список дочерних widgets Stack.
List<Widget> children: const <Widget>[]
Cвойство alignment используется для выравнивания дочерних widgets, отличающихся от Positioned. Его значение по умолчанию - AlignmentDirectional.topStart.
AlignmentGeometry alignment: AlignmentDirectional.topStart
- TODO Link?
Пример ниже показывает, что свойство alignment Stack не влияет на дочерний widgets, которые являются Positioned.
SizedBox (
width: double.infinity,
height: double.infinity,
child: Stack(
alignment: Alignment.centerLeft,
children: <Widget>[
Container(
width: 290,
height: 190,
color: Colors.green,
),
Container(
width: 220,
height: 130,
color: Colors.yellow,
),
Positioned (
bottom: 10,
right: 10,
child: Container(
width: 150,
height: 90,
color: Colors.red,
),
),
],
)
)
Свойство textDirection используется для задания направления текста. Его значение влияет на поведение свойства alignment.
TextDirection textDirection
Свойство fit показывает "Как определить размер дочерних виджетов, которые не являются Positioned из IndexedStack". Его значение по умолчанию - StackFit.loose.
StackFit fit: StackFit.loose
// Enum:
StackFit.expand
StackFit.loose
StackFit.passthrough
- TODO Link?
Свойство overflow используется для указания того, как Stack обрабатывает те дочерние виджеты, которые переполняются (overflow) из него. Решение может заключаться в том, чтобы обрезать (clip) переполнение или позволить ему отобразиться. Значение overflow по умолчанию - Overflow.clip.
Overflow overflow: Overflow.clip
// Enum:
Overflow.clip
Overflow.visible
Результаты проверки показывают, что overflow:Overflow.visible работает только с некоторыми типами виджетов (например, Positioned или Transform).
- TODO Link?
Например:
overflow (ex1)
Container (
width: 250,
height: 250,
color: Colors.blueGrey,
margin: EdgeInsets.all(20),
child: Stack (
overflow: Overflow.visible,
children: <Widget>[
Positioned(
top: 50,
left: 50,
child: Container(
width: 290,
height: 100,
color: Colors.green,
),
),
Positioned(
top: 70,
left: 70,
child: Container(
width: 120,
height: 230,
color: Colors.yellow,
),
)
],
)
)
Пример: Transform смещено (skew) вдоль оси Y, это может быть переполнение (overflow) из Stack. Переполнение по оси Y будет отображаться, в то время как переполнение по оси X будет обрезано (clip).
overflow (ex2)
Container (
width: 250,
height: 250,
margin: EdgeInsets.all(20),
color: Colors.blueGrey,
child: Stack (
overflow: Overflow.visible,
children: <Widget>[
Container(
height: 100,
width: 300,
color: Colors.green,
),
Transform(
alignment: FractionalOffset.topLeft,
transform: Matrix4.skewY(0.7), // skew will not go out of y bounds
child: Container(
height: 100,
width: 300,
color: Colors.red,
),
),
],
)
)
- TODO Link?
Clip clipBehavior: Clip.hardEdge
