Руководство Flutter Container
View more Tutorials:
В Flutter, Container - это контейнер, используемая для размещения дочернего widget. В то же время вы можете задать его стиль с помощью свойств, таких как padding, margin, alignment и т. д. Container выделяет содержимое или отделяет его от другого содержимого.
Container Constructor:
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),
)
]
)
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 (ниже).
Свойство 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!
Свойство padding используется для создания пустого пространства в Container и окружения child (если таковой имеется).
EdgeInsetsGeometry padding
Свойство color используется для установки цвета фона Container и позади (behind) child.
Color color
Свойство 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!
Свойство 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: () {}
)
)
double width
double height
Свойство 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!
Свойство margin спользуется для создания пустого пространства вокруг Container.
EdgeInsetsGeometry margin
Matrix4 transform
Widget child
Clip clipBehavior: Clip.none
- TODO Link!
