This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging
1. Layout components
1.1 the Stack layer
The Stack allows the subcomponents to be Positioned on top of each other, equivalent to the FrameLayout layout in Android. The Stack and Stack fit together to achieve absolute positioning.
Stack({
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
List<Widget> children = const <Widget>[],
})
Copy the code
-
Fit: This parameter determines how unlocated child components fit into the size of the Stack. Stackfit.loose indicates the size of the child component to be used, and stackfit.expand indicates the size of the Stack to be expanded.
-
Overflow: This property determines how to display subcomponents that are out of Stack display space; If the value is overflow.clip, the excess will be clipped (hidden); if the value is overflow.visible, it will not.
Child controls determine size
ConstrainedBox(
constraints: BoxConstraints.expand(),
child: Stack(
alignment: AlignmentDirectional.topStart, // topCenter topEnd...
fit: StackFit.loose,
overflow: Overflow.clip,
clipBehavior: Clip.hardEdge,
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.red,
),
Positioned(
left: 10,
top: 10,
height: 100,
width: 100,
child: Container(
color: Colors.yellow,
),
),
Container(
height: 50,
width: 50,
color: Colors.green,
)
],
),
);
Copy the code
Covered with a screen
The size of the default Stack is determined by the sublayout; if you want to cover the screen, use ConstrainedBox to wrap the Stack.
ConstrainedBox(
constraints: BoxConstraints.expand(),
child: Stack(
alignment: Alignment.center, // Specifies the alignment of widgets that are not located or partially located
children: <Widget>[
Container(
child: Text("Hello world", style: TextStyle(color: Colors.white)),
color: Colors.red,
),
Positioned(
left: 18,
child: Text("Center premise. - On the left."),
),
Positioned(
top: 18,
child: Text("Center premise. - At the top."))])Copy the code
-
The first subtext component, Text(“Hello World “), has no positioning specified and the alignment value is align.center, so it is displayed in the center.
-
The second subtext component, Text(” center premise – left “), only specifies the horizontal positioning (left), so if it is partially positioned, that is, if it is not positioned vertically, it will align vertically in the alignment specified by the alignment, that is, it will align vertically in the alignment specified by the alignment.
-
The third subtext component, Text(” center premise – at the top “), works the same way as the second Text, except that the horizontal direction is not positioned, so the horizontal direction is centered.
Fit attributes
Fit: stackfit.expand, // The unlocated widget fills the entire StackCopy the code
Since the first subtext component is not positioned, the FIT attribute will apply to it, filling up the Stack
Overflow attributes
clip
: Crop the view that is outside the Stack layoutvisible
: Displays views that are out of Stack layout
Stack(
overflow: Overflow.clip, // Crop the view outside the Stack layout
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.red,
),
Positioned(
left: 100,
top: 100,
height: 200,
width: 200,
child: Container(
color: Colors.green,
),
)
],
)
Copy the code
overflow: Overflow.visible // Display the view outside the Stack layout
Copy the code
1.2 IndexedStack
IndexedStack(
index: _index,
children: <Widget>[
Container(
height: 300,
width: 300,
color: Colors.red,
alignment: Alignment.center,
),
Center(
child: Container(
height: 300,
width: 300,
color: Colors.green,
),
),
Container(
height: 300,
width: 300,
color: Colors.yellow,
alignment: Alignment.center,
),
],
)
Copy the code
Only the _index layout of the current children will be displayed
1.3 Positioned
C-would have to be a submodule of the Stack
Stack(
children: <Widget>[
Positioned(
left: 30,
right: 30,
top: 30,
bottom: 30.// width: 300,
// height: 300,
child: Container(color: Colors.red),
),
],
)
Copy the code
Left, top, right, and bottom respectively represent the distance from the left, top, right, and bottom of the Stack. Width and height are used to specify the width and height of the element to be positioned. Notice that the width and height of space are slightly different from the meaning of the other Spaces. Here they are used to position the component in conjunction with left, top, right and bottom. For example, in the horizontal direction, you can specify only two of the left, right, and width properties. For example, if you specify left and width, the child’s width will be left + width. If you specify all three properties at once, an error will be reported.
2. Linear Layout (Row and Column)
Similar to the LinearLayout control in Android. Row and Column are both inherited from Flex and are arranged in a horizontal or vertical direction.
- Spindle alignment:
MainAxisAlignment
- Vertical alignment:
CrossAxisAlignment
2.1 the Row level
Row({
TextDirection textDirection,
MainAxisSize mainAxisSize = MainAxisSize.max,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
VerticalDirection verticalDirection = VerticalDirection.down,
CrossAxisAlignment crossAxisAlignment = center,
List<Widget> children = const <Widget>[],
})
Copy the code
mainAxisSize
: Max indicates that the maximum width of Row is the width of the screen, and min indicates that the children are wrappedmainAxisAlignment
If:mainAxisSize
A value ofmin
, this property is meaningless.verticalDirection
Said:Row
The alignment direction of the vertical axis (vertical), default isdown
, means from top to bottom.
The black border is the actual width of the Row