The cascading layout of a Flutter is similar to the absolute positioning of the Web or the Frame layout of Android. Child components can position themselves based on the position of four corners from their parent container. Absolute positioning allows the sub-components to be stacked (stacked in the order declared in the code), and absolute positioning is realized by using the Stack and the Stack components in the Flutter. The Stack allows the suds to Stack, and the position of the suds is Positioned according to the four corners of the Stack.

Stack

Stack({
    this.alignment = AlignmentDirectional.topStart,
    this.textDirection,
    this.fit = StackFit.loose,
    this.overflow = Overflow.clip,
    List<Widget> children = const <Widget>[],
})
Copy the code
  • alignment:This parameter determines how to align not positioned (not usedPositioned) or partially positioned child components. The partial localization is right hereIn particular, it is positioned on only one axis:left,rightAs the horizontal axis,top,bottomIs the vertical axis, as long as it contains a positioning attribute on an axis is considered to have positioning on that axis.
  • textDirectionAnd:Row,WrapthetextDirectionSame function, both used to determinealignmentAligned frame of reference, i.e. :textDirectionThe value ofTextDirection.ltr, thenalignmentthestartRepresents the left,endSo it stands for right, 1, 2From left to rightThe order; iftextDirectionThe value ofTextDirection.rtl, thenalignmentthestartRepresents the right,endThat’s left, 1, 2From right to leftThe order.
  • fit: This parameter is used for confirmationNo positioningHow do the child components of theStackThe size of the.StackFit.looseRepresents the size of the child component used,StackFit.expandIt means extended toStackSize.
  • overflow: This property determines how to display the beyondStackDisplay space child component;overflowThe value ofOverflow.clip, the excess will be clipped,overflowThe value ofOverflow.visibleTime does not.

Positioned

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

Left, top, right, and bottom indicate the distances from the left, top, right, and bottom edges of the Stack. Width and height are used to specify the width and height of the element to be positioned. Note: The width and height of tourists are Positioned in conjunction with the left, top, right and bottom. For example, in the horizontal position, only two of the left, right and width can be specified. If you give the left and width, Right is automatically evaluated (left + width), if three attributes are specified at the same time, an error is reported; In the vertical direction, only two attributes of top, bottom, and height can be specified. If top and height are specified, bottom automatically calculates (top + height). If all three attributes are specified, an error is reported.

The sample

In the following example, we demonstrate the properties of Stack and positioning of a few Text components:

ConstrainedBox ConstrainedBox(constraints: BoxConstraints. Expand (), child: Stack(alignment: AlignmentDirectional center, / / specified not positioning or part of the positioning of the child component alignment children: < widgets > [Container (child: the Text ("Hello World"TextStyle(color: color.white)), color: color.blue,), toy (left: 18.0, child: Text("I am Jack"C-21,), toy (top: 18.0, child: Text("Your friend"(), [(), [(),Copy the code

The running effect is as follows:

Look at the picture and speak:

  • Due to the first subfile componentText("Hello World")No location is specified, andalignmentA value ofAlignmentDirectional.center, so it will be centered.
  • Second child text componentText("I am Jack")Only horizontal positioning is specified (left), so it belongs to partial positioning, that is, there is no positioning in the vertical direction, so its alignment in the vertical direction will be based onalignmentAligns the specified alignment, that is, vertically centered.
  • The third child text componentText("Your friend")And a second subtext componentText("I am Jack")The principle is the same, but there is no horizontal orientation, so the horizontal direction is centered.

We assign a FIT attribute to the Stack in the example above, and then adjust the order of the three child text components:

The Stack (alignment: AlignmentDirectional. Center, fit: StackFit expand, children: < Widget > [Positioned (left: 18.0, the child: Text("I am Jack"),
    ),
    Container(
      child: Text("Hello World"TextStyle(color: plays.white), color: plays.blue,), toy (top: 18.0, child: Text("Your friend"),),),Copy the code

The running effect is as follows:

Look at the picture and speak:

  • The second subtext component is not located, sofitThe property will act on it, it will fill upStack.
  • Due to theStackThe subcomponents are stacked, so the first subtext component is obscured by the second, and the third is on top, so it displays normally.