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 layout
  • visible: 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 wrapped
  • mainAxisAlignmentIf:mainAxisSizeA value ofmin, this property is meaningless.
  • verticalDirectionSaid:RowThe alignment direction of the vertical axis (vertical), default isdown, means from top to bottom.

The black border is the actual width of the Row