Cодержание

Flutter Container
alignment
padding
color
decoration
foregroundDecoration
width
height
constraints
margin
transform
child
clipBehavior

Pуководства Flutter

Руководство Flutter Container

View more Tutorials:

Pуководства Flutter

Flutter Container
alignment
padding
color
decoration
foregroundDecoration
width
height
constraints
margin
transform
child
clipBehavior

1- Flutter Container

В Flutter, Container - это контейнер, используемая для размещения дочернего widget. В то же время вы можете задать его стиль с помощью свойств, таких как padding, margin, alignment и т. д. Container выделяет содержимое или отделяет его от другого содержимого.

Container Constructor:

https://api.flutter.dev/flutter/widgets/Container/Container.html

Container Constructor

Container(
    {Key key,
    AlignmentGeometry alignment,
    EdgeInsetsGeometry padding,
    Color color,
    Decoration decoration,
    Decoration foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    EdgeInsetsGeometry margin,
    Matrix4 transform,
    Widget child,
    Clip clipBehavior: Clip.none}
)

Существует множество параметров, участвующих в создании Container, таких как width, height, child, alignment и т. д. Кроме того, на него влияют ограничения родительского widget, поэтому поведение макета Container является относительно сложным. Теперь давайте рассмотрим различные примеры в различных случаях:

Case 1:

Если заданы параметрыwidth, height и родительский widget ограничен (bounded), Container определит свой размер в соответствии с предоставленными параметрами.

Например, если указанный Container (width, height)=(200,200) является дочерним элементом Center, то он будет иметь размер 200x200.

Center (
  child:  Container (
      color: Colors.greenAccent[100],
      padding: EdgeInsets.fromLTRB(10, 5, 50, 5),
      width: 200,
      height: 200
  )
)

Case 2:

Если параметры child, width, height, constraints не заданы (или null), а родительский widget неограничен (unbounded), Container попытается определить его размер как можно меньше.

Рассмотрим пример: Container с незаданными параметрами width, height, child, constraints, а является дочерним элементом Row, он попытается определить свой горизонтальный размер как можно меньше.

Примечание: Row представляет собой вертикально ограниченный (bounded) widget, но неограниченный (unbounded) по горизонтали.

Row (
    children: [
      Container (
        color: Colors.greenAccent[100],
        padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
        margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
      )
    ]
)

Руководство Flutter Row

Case 3:

Если параметры child, width, height, constraintsне заданы (или null), а родительский widget ограничен (bounded), Container попытается установить его размер как можно больше.

Например: Container с незадаными параметрами child, width, height, constraints, а является дочерним элементом Center, размер Container будет максимально большим.

Center (
    child:   Container (
      color: Colors.greenAccent[100],
      padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
      margin: EdgeInsets.fromLTRB(30, 55, 50, 70)
    )
)

Case 4:

Если child указан, но параметры width, height, constraints и alignment отсутствуют, Container будет как можно меньше и будет соответствовать ограничениям родительского widget.

Например:

Center (
    child: Container (
        color: Colors.greenAccent[100],
        padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
        margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
        child: ElevatedButton (
          child: Text("Button"),
          onPressed: () {},
        )
    )
)

Например:

ConstrainedBox (
    constraints: BoxConstraints (
        maxWidth: 300,
        maxHeight: 200
    ),
    child: Container (
        color: Colors.greenAccent[100],
        padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
        margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
        child: ElevatedButton (
          child: Text("Button"),
          onPressed: () {},
        )
    )
)

Case 5:

Если child и alignment заданы, но параметры width, height, constraints отсутствуют, Container будет максимально большим.

См. дополнительные примеры в разделе alignment (ниже).

2- alignment

Свойство alignment используется для выравнивания (align) положения child в Container.

AlignmentGeometry alignment

Если Container, для которого указан child и не указаны width, height, constraints и alignment, он установит свой размер как можно меньше. Однако если Container, для которого указаны child и alignment , но не указаны width, height, constraints, он будет определять свой размер как можно больше.

Container (
    alignment: Alignment.bottomRight,
    color: Colors.greenAccent[100],
    padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
    margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
    child: ElevatedButton (
      child: Text("Button"),
      onPressed: () {},
    )
)

TODO Link!

3- padding

Свойство padding используется для создания пустого пространства в Container и окружения child (если таковой имеется).

EdgeInsetsGeometry padding

Руководство Flutter EdgeInsetsGeometry

4- color

Свойство color используется для установки цвета фона Container и позади (behind) child.

Color color

5- decoration

Свойство decoration используется для рисования чего-либо на фоне Container и позади (behind) child. Если вы хотите нарисовать цвет на фоне Container (а также за child), лучше всего использовать свойство color.

Decoration decoration

Container (
    alignment: Alignment.center,
    decoration: BoxDecoration(
      color: const Color(0xff7c94b6),
      image: const DecorationImage(
        image: NetworkImage('https://s3.o7planning.com/images/tom-and-jerry.png'),
        fit: BoxFit.cover,
      ),
      border: Border.all( color: Colors.black, width: 8),
      borderRadius: BorderRadius.circular(12),
    ),
    margin: EdgeInsets.all(30),
    child: ElevatedButton(
        child: Text("I am a Long Button"),
        onPressed: () {}
    )
)

TODO Link!

6- foregroundDecoration

Свойство foregroundDecoration используется для рисования чего - либо на фоне Container и перед (front) child. Он может закрывать и делать child невидимым, но вы все равно можете взаимодействовать с child.

Decoration foregroundDecoration

Например:

Container (
    alignment: Alignment.center,
    foregroundDecoration: BoxDecoration(
      image: const DecorationImage(
        image: NetworkImage('https://s3.o7planning.com/images/smile-64.png'),
        fit: BoxFit.none,
      ),
      border: Border.all( color: Colors.black, width: 8),
      borderRadius: BorderRadius.circular(12),
    ),
    margin: EdgeInsets.all(30),
    child: ElevatedButton(
        child: Text("I am a Long Button"),
        onPressed: () {}
    )
)

7- width

double width

8- height

double height

9- constraints

Свойство constraints используется для добавления дополнительных ограничений для Container.

BoxConstraints constraints

Например:

Container (
    color: Colors.greenAccent[100],
    padding: EdgeInsets.all(30),
    width: 200,
    height: 200,
    constraints: BoxConstraints(
        maxHeight: 80
    ),
    child:ElevatedButton(
      child: Text("Button"),
      onPressed: (){},
    )
)

TODO Link!

10- margin

Свойство margin спользуется для создания пустого пространства вокруг Container.

EdgeInsetsGeometry margin

Руководство Flutter EdgeInsetsGeometry

11- transform

Matrix4 transform

12- child

Widget child

13- clipBehavior

Clip clipBehavior: Clip.none

TODO Link!

View more Tutorials:

Pуководства Flutter