The cascading layout of Flutter, the equivalent of absolute positioning on the Web, is also an important part.

It allows child components to position themselves based on the position of four angles from the parent container. Absolute positioning allows the child components to be stacked (in the order declared in the code).

The Flutter uses two components, Stack and jam, to provide absolute positioning. The Stack allows the suds to Stack, and the position of the suds is Positioned according to the four corners of the Stack.

Stack

Allows subcomponents to be stacked, on top of each other, just like on the Web

The source code example

Constructors are as follows:

Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart,
    this.textDirection,
    this.fit = StackFit.loose,
    this.overflow = Overflow.clip,
    List<Widget> children = const <Widget>[],
 })
Copy the code

Attribute interpretation

alignment

This property determines how to position the child which has no positioning (no use of tourists) or partial positioning. The so-called partial positioning, here specifically refers to no positioning on a certain axis: left, right for the horizontal axis, top, bottom for the vertical axis, as long as it contains a positioning attribute on the axis even if there is positioning on the axis.

textDirection

Like the textDirection functions of Row and Row, they are used to determine the reference frame for alignment.

LTR. The start and end alignments indicate the left and right respectively. TextDirection is textdirection. RTL. In this case, start indicates the right and end indicates the left.

fit

Used to determine how unpositioned child components fit into the Stack’s size.

Stackfit.loose indicates the size of the child component to use; StackFit. Expand specifies the size to expand into the Stack.

overflow

This property determines how to display child components that exceed the Stack display space;

Overflow.clip indicates that the excess will be clipped (hidden); Overflow.visible: will not be clipped.

As for how to use it, an example will be given at the end

Positioned

Absolute positioning, used to determine the location of child components

The source code example

Constructors are as follows:

const Positioned({
  Key key,
  this.left, 
  this.top,
  this.right,
  this.bottom,
  this.width,
  this.height,
  @required Widget child,
})
Copy the code

Attribute interpretation

Left, top, right, bottom

They represent the distances from the left, top, right, and bottom four sides of the Stack.

Width, height,

Specifies the width and height of the element to be positioned.

Note:Positionedthewidth,heightIt has a slightly different meaning from other places, and is used here for coordinationleft,top 、right,bottomTo locate components,

For example: in the horizontal direction, you can specify only two of the three attributes left, right, and width. If you specify left and width, right will automatically calculate (left+width). If you specify all three attributes, an error will be reported.

Code examples:

Stack(fit: StackFit. Expand, // expand to the size of the Stack. Children: < widget >[Container(child: Text(" XXXXXX ", style: TextStyle(color: colors.white)), color: colors.pink,), toy (left: 15.0, top: 30.0, child: Text (" yyyyyy "),), Positioned (child: top: 15.0, Text (" ZZZZZZ "),),);Copy the code

Operation effect:

portal

Flutter layout controls –>Align, Center

Flutter layout controls –>Wrap, Flow

Flutter layout controls –>Flex, Expanded

Flutter layout controls –>Row, Column

M_M