“This is the 7th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

The cascading layout is similar to the absolute positioning in the Web and the Frame layout in iOS. Child components can determine their position according to the position of the qualification Angle from the parent component. This allows the child parts to be stacked in the order declared (added) in the code.

Normally in a Flutter we use a combination of Stack and jam to give absolute positioning. The Stack provides a Stack of the foot parts, while the position of the child parts is Positioned according to the four corners of the Stack.

Stack

In a Flutter, Stack is defined as follows:

  Stack({
    Key? key,
    this.alignment = AlignmentDirectional.topStart,
    this.textDirection,
    this.fit = StackFit.loose,
    this.overflow = Overflow.clip,
    this.clipBehavior = Clip.hardEdge,
    List<Widget> children = const <Widget>[],
  })
Copy the code
  • alignment: This parameter indicates the alignment if we do not locate the child parts or if the child parts are only partially positioned;
    • No location: Not usedPositionedTo locate;
    • 2. To be partially positioned, especially on an axis:
      • left.rightAs the horizontal axis;top.bottomAs the vertical axis; As long as you include a location attribute on an axis, you count a location on that axis
  • textDirectionAnd:RowthetextDirectionSame function, both used to determinealignmentReference frame for alignment;
    • textDirectionA value ofTextDirection.ltr,alignmentthestartOn the left,endOn the right; That isFrom left to rightThe order;
    • textDirectionA value ofTextDirection.rtl,alignmentthestartOn the right,endOn the left; That isFrom right to leftThe order;
  • fix: How does a subcomponent that is used to determine unpositioning fitStackThe size of the;
    • StackFit.loose: Use the size of the sub-parts;
    • StackFit.expandTensile to:StackThe size of the;
  • overflow: Used to determine how to display out of boundsStackChild parts of the display area;
    • Overflow.clip: The sub-component exceedsStackThat part of the display area will be clipped, or hidden;
    • Overflow.visible: The part outside the display area will not be clipped;

Positioned

Offers are defined as follows:

  const Positioned({
    Key? key,
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    required Widget child,
  })
Copy the code
  • leftDistance:StackThe distance to the left;
  • topDistance:StackThe distance above;
  • rightDistance:StackDistance to the right;
  • bottomDistance:StackThe distance below;
  • width: Specifies the width of the part to be positioned.
  • height: Specifies the height of the component to be located.

Note that: Positioned * * * * * * width and height * * * * * *, unlike the rest of the meaning, Positioned in * * * * * * and * * * * width in height is used to match left * * * * * *, * *, * * top **right** and **bottom** to locate parts; For example, in the horizontal direction, we can specify only two of the three attributes **left**, **right**, and **width**, because the remaining one is computed from the specified two attributes. For example: left when we specify the * * * * and * * width * *, * * right * * values will automatically calculated left (* * * * + * * width * *). If you specify three attributes at the same time, an error is reported.

The Stack layout

Let’s create aStackLayout. Put three in thereContainerLet’s look at the default:As you can see, the parts created first are at the bottom level, and the parts created later are stacked on top of each other from the inside out;

Next, wePositionedTo modify the topContainerLocation of components:The blueContainerDistance to bottomContainerOn the left10Pixel, redContainerDistance to the right10A pixel;

The same effect we usemarginCan also achieve:One thing to notemarginIs relative to the superview;

So, if we set bothPositionedtherightandmarginWhat are the results?End result: Simultaneous SettingsPositionedtherightandmargin, the final position is frommarginDecision;

If we only think about the position of the piece, not its relationship to the parent, then we would normally recommend toy, otherwise margin; Note that margins may affect the size of external widgets if they are flexibly laid out;

AspectRatio

In addition to offering tourists, in the Stack part we often use an AspectRatio, which is defined as follows:

  const AspectRatio({
    Key? key,
    required this.aspectRatio,
    Widget? child,
  })
Copy the code
  • aspectRatio: Mandatory attributes, width to height ratio;

​

Let’s start with a piece of code:Our blue area is wide100High,500Rectangle area, which we use at this timeAspectRatioTo set the aspect ratio:We found that throughAspectRatioAfter the aspect ratio is set, the blue area does not change, and this is because we put the blue areaheightandwidthAll given a fixed value at this pointAspectRatioWill not take effect, we will remove the height: AspectRatioThe set aspect ratio is in effect, and the height of the blue area has changed and is wide2Times;

AspectRatio affects the parent component. The parent component only needs to set one property of the width. The child property of AspectRatio is not normally assigned; Because the component assigned by child is not bound by AspectRatio, its size is determined by the parent component affected by AspectRatio;