Flutter - the most detailed Stack (stack layout) tutorial

Multiple components can be accommodated, and subcomponents are placed in a superimposed manner, with the latter on top. With the Alignment property, it can be used in conjunction with the Positioned component for precise and effective placement. Similar to the FramLayout layout on the Android side .

Attributes	effect
alignment	where the subcomponents are placed
clipBehavior	Clip the content of the widget

• scenes to be used:

For example, if you need to add a special logo on the user's avatar during development, you need to use a stacked layout;

class CustomStack extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    var yellowBox = Container(
      color: Colors.yellow,
      height: 100,
      width: 100,
    );

    var redBox = Container(
      color: Colors.red,
      height: 90,
      width: 90,
    );

    var greenBox = Container(
      color: Colors.green,
      height: 80,
      width: 80,
    );

    return Container(
      width: 200,
      height: 120,
      color: Colors.grey.withAlpha(33),
      child: Stack(
        textDirection: TextDirection.rtl,
        fit: StackFit.loose,
        alignment: Alignment.topRight,
        children: <Widget>[yellowBox, redBox, greenBox],
      ),
    );
  }
}

Accurately stack the internal layout, the position and arrangement of sub-components;

Attributes	effect
left	left distance
top	up distance
right	right distance
bottom	down distance

Stack(
        textDirection: TextDirection.rtl,
        fit: StackFit.loose,
        alignment: Alignment.bottomLeft,
        children: <Widget>[
          yellowBox,
          redBox,
          Positioned(
            bottom: 10,
            right: -30,
            child: greenBox,
          )
        ],
      )

can be seengreenPart of the component is clipped and adjusted because the clipBehavior attribute is not used. Next, let's look at the effect of the Clip.none attribute

Stack(
        textDirection: TextDirection.rtl,
        fit: StackFit.loose,
        alignment: Alignment.bottomLeft,
        clipBehavior: Clip.none,
        children: <Widget>[
          yellowBox,
          redBox,
          Positioned(
            bottom: 10,
            right: -30,
            child: greenBox,
          )
        ],
      ),

After adding this attribute, we can see that,greenThe excess of the component is also shown. The meaning of this attribute is also clear at a glance.

Precisely control the position of subcomponents, similar to Positioned .

Create a style with an Align component

Stack(
        textDirection: TextDirection.rtl,
        fit: StackFit.loose,
        alignment: Alignment.bottomLeft,
        clipBehavior: Clip.none,
        children: <Widget>[
          Align(
            alignment: const Alignment(0, 0),
            child: redBox,
          ),
        ],
      )

You can see that the layout is displayed in the middle,Alignment(0, 0)This attribute is divided intoxaxle heelyAxis, range values ​​are-1arrive1between;

See Alignment(0, 1)

It can be seen that when y is equal to 1, the red components are arranged at the bottom;

See Alignment(-0.5, -0.5)

When x is equal to -0.5 , it is obvious that the component is in the middle of the horizontal axis -1 to 0;
when y is equal to -0.5 , it is obvious that the component is in the middle of the main axis -1 to 0;
the sum of the x values ​​is arranged according to the horizontal axis, The size of the y value is arranged according to the main axis;

AttributeAlignment(1, 4)

When x and y are greater than 1, the subcomponent is not clipped. Explain that using the Align property is not affected by clipBehavior: Clip.none ;