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

Linear layout means that the components are arranged horizontally or vertically. Linear layout in Flutter is achieved by Row and Column; This is similar to the Android LinearLayout control; Row and Column inherit from Flex(elastic layout);

Principal axis and vertical axis

For a linear layout, it is divided by the main axis and the vertical axis;

  • If the layout is alongThe horizontal directionSo the principal axis meansThe horizontal directionThe vertical axis isThe vertical direction;
  • If the layout is alongThe vertical directionSo the principal axis meansThe vertical directionThe vertical axis isThe horizontal direction;
  • MainAxisAlignmentSpindle alignment;
  • CrossAxisAlignmentVertical alignment;

The preparatory work

We saw that in the previous videoContainerThe invisible will change its size according to its internal child parts, such as:A default full screen with a yellow backgroundContainerIf we add a child inside itText:It used to have a full screen of yellow backgroundContainerTurned out to beTextParts of the same size;

The Container attribute alignment is defined as follows:

final AlignmentGeometry? alignment;
Copy the code

Aligment requires a value of type AlignmentGeometry that represents the starting position of the child in the parent. AlignmentGeometry is an abstract class that has two commonly used subclasses: Alignment and FractionOffset;

Here we first use Alignment for layout, and its constructor is:

const Alignment(this.x, this.y)
Copy the code

X and y range from -1 to 1. The center point is 0,0.

ContainerBeing stretched, andTextOn theContainerAt the center of;

So, let’s look at how Row is laid out;

Row

Row can lay out its child widgets horizontally; Its definition is as follows:

  Row({
    Key? key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    List<Widget> children = const <Widget>[],
  })
Copy the code
  • textDirection: indicates whether the layout order of horizontal subcomponents is left to right or right to left; The default text direction of the current system environment is Chinese, Left to right in English, and right to left in Arabic.
  • mainAxisSizeSaid:RowControls occupied in the main axis direction, that is, the horizontal direction;
    • MainAxisSize.max(Default) : Means to take up as much horizontal space as possible; Depending on how much space the pipe parts actually take up horizontally,RowThe width of is always the maximum width in the horizontal direction;
    • MainAxisSize.min: to occupy as little space as possible in the horizontal direction; If the child parts are not covered with horizontal residual space, thenRowCentury width is the sum of the horizontal space occupied by all the sub-components;
  • mainAxisAlignment: indicates that the sub-component is inRowAlignment in the horizontal space occupied:
    • mainAxisSizeA value ofMainAxisSize.minWhen,mainAxisAlignmentIn this case, the total width of the sub-component isRowOf the same width;
    • mainAxisSizeA value ofMainAxisSize.max(Default) :
      • MainAxisAlignment.startSaid along thetextDirectionInitialization direction alignment of
        • TextDirection.ltr:MainAxisAlignment.startRepresents left alignment;
        • TextDirection.rtl:MainAxisAlignment.startRepresents right alignment;
      • MainAxisAlignment.endwithMainAxisAlignment.startRepresents the opposite orientation of the initial alignment of;
      • MainAxisAlignment.centerIndicates center alignment;
    • It can be understood as:textDirectionismainAxisAlignmentReference frame;
  • verticalDirectionSaid:RowThe alignment of the vertical axis;
    • VerticalDirection.downFrom top to bottom;
    • VerticalDirection.upFrom bottom to top;
  • crossAxisAlignment: indicates the alignment of sub-components along the vertical axis;RowThe height of is equal to the height of the highest child element in the child component; Its take the sum of theMainAxisAlignmentAs containingstart.endandcenterThree values; The difference is that the reference frame isverticalDirection:
    • verticalDirectionA value ofVerticalDirection.downWhen,CrossAxisAlignment.startRepresents top alignment;
    • verticalDirectionA value ofVerticalDirection.upWhen,CrossAxisAlignment.startRepresents bottom alignment;
    • CrossAxisAlignment.endandCrossAxisAlignment.startOn the contrary;
  • childrenGroup of child parts;

We’re going to start right nowRowAdd threeTextTake a look at the default:The default threeTextIs aligned to the left; The red wireframe area isRowWhere the two blue lines intersect atRowThe central point of; becauseRowIt’s horizontal, so at this pointAlignmentthexThe value of theRowThe layout has no effect:

The same y value has no effect on Column layout;

What we’re going to do isRowthetextDirectionSet toTextDirection.rtlTake a look at the results:threeTextThe initialization sequence is changed to start from right; In order to see the effect, we will have more than oneRowPut them in the interface and arrange them from top to bottom. The effect is shown as follows:

  • Line 1: center aligned by default;
  • Line 2: Because of the settingmainAxisSizeThe value ofMainAxisSize.min, soRowAlignment ofmainAxisAlignmentIt makes no sense. The child parts are displayed in a left-to-right layout, and the sum of the width of the child parts isRowOf the same width;
  • Third line: because willtextDirectionSet toTextDirection.rtl, indicating that the child parts will be laid out in the initialization order from right to left, whenMainAxisAlignment.endIt’s left aligned;
  • Line 4: Due to multipleTextFont size is not the same, so its height is not the same; whileVerticalDirection.upRepresents the order from bottom to top, while at this pointCrossAxisAlignment.startRepresents bottom alignment on the vertical axis;
  • Line 5:CrossAxisAlignment.startThe default is top alignment;

Column

Column can lay out its sub-components vertically, with the same parameters as Row, except that Column is laid out vertically, and its main and vertical axes are opposite to Row.

For example, let’s put the previous layoutRowI’ll just change it toColumnTake a look at the results:

The three texts in the Row originally arranged from left to right are changed to top to bottom after Column is changed. In addition, since the Alignment x is -1, the three texts in the horizontal direction are first placed on the far left of the screen.

Additions to MainAxisAlignment

MainAxisAlignment is an enumerated type, which is defined as follows:

enum MainAxisAlignment {
  start,
  end,
  center,
  spaceBetween,
  spaceAround,
  spaceEvenly,
}
Copy the code

In addition to the sum of start, end, and Center, MainAxisAlignment also has spaceBetween, spaceAround, and spaceinstituted. What will these three values look like?

spaceBetween

SpaceBetween means: after all the sub-parts are laid out, the remaining space is evenly distributed among several sub-parts;

The demo effect is as follows:

spaceAround

SpaceAround means that after all the sub-parts are laid out, the remaining space is evenly distributed around several sub-parts;

For better demonstration, let’s change the font size here to look like this:

spaceEvenly

spaceEvenlyAfter all the sub-parts are laid out, the remaining space is divided evenly with the sub-parts;

The pink bars in the figure indicate equal distances between the two;

A complement to CrossAxisAlignment

In addition to our usual enumerated values,CrossAxisAlignmentThere arebaselineEnumeration value of, and what about the effect?Change the value tobaselineAfter that, the project reported an error directly becausebaselineThis enumeration value is combinedtextBaselineAttribute to use; The effect is as follows:

End result: The three Text pieces are not aligned, but the bottom of the Text is aligned;

Additions to Expanded

ExpandeedIs an adaptive component; Let’s take a quick look at the effect:useExpandedThe partsTextAfter wrapping it up,Text[Fixed] After the widget text exceeds the limit, it can now display itself in line wrap.

We continue to modify the code:We put theTextIncluded in theContainerInside, it’s foundContainerAlso adaptive inThe spindle directionIt’s stretched;

Note that the children array of Expanded cannot be decorated with const;

At this point, we modifyContainerHeight:Height is in effect;

  • inRowtoExpandedThe sub-component setting height is meaningful, width is not
  • inColumntoExpandedSub-component setting height is meaningless, width is meaningful;

Expanded will not leave a gap in the spindle direction and will be Expanded and stretched;