[flutter 2-10] flutter handle tutorial UI layout and widget – streaming layout wrap

By Vlad
Source | Vlad (official account: fulade_me)

Wrap

stayFlutterinWrapIs a streaming layout control,RowandColumnIt is easy to use in layout, but there is a disadvantage. If the number of child controls is too large, it will lead toRoworColumnWhen it cannot be loaded, an error will appear on the UI page.WrapThis problem can be perfectly avoided. When too many lines of controls are not fully displayed,WrapYou can wrap the display.

of courseWrapFollowRowandColumnThere are many similarities.
Let’s look at it firstWrapConstructor for:

Wrap({
    // Key
    Key key,
    //The display direction of the child control has two values: vertical direction and horizontal direction
    this.direction = Axis.horizontal,
    ///The layout of child controls is similar to the mainaxisalignment of column 
    this.alignment = WrapAlignment.start,
    ///Distance between child controls in spindle direction
    this.spacing = 0.0,
    ///Layout of cross direction of child controls
    this.runAlignment = WrapAlignment.start,
    ///Cross direction spacing of child controls
    this.runSpacing = 0.0,
    ///The alignment of the cross axis is the same as the crossaxisalignment of the column
    this.crossAxisAlignment = WrapCrossAlignment.start,
    ///The writing direction is the same as the textdirection of column
    this.textDirection,
    ///The layout direction of the child controls in the wrap cross axis direction
    this.verticalDirection = VerticalDirection.down,
    ///Cutting mode
    this.clipBehavior = Clip.hardEdge,
    ///Child controls
    List<Widget> children = const <Widget>[],
})

Let’s take a look at these parameters

direction

directionThere are two parameter valuesAxis.horizontalandAxis.vertical, obviously it managesWrapIs the layout horizontal or vertical.
Axis.horizontalIndicates that the child controls are laid out horizontally,Axis.verticalIndicates that the child controls are displayed in a vertical layout.

Axis.horizontal
The effect is as follows:

Axis.vertical
The effect is as follows:

alignment

alignmentReceive oneWrapAlignmentEnumeration of types,WrapAlignmentThere are six enumeration values, as follows:

WrapAlignmentEnumeration value and effect ofColumnofmainAxisAlignmentThe effect is the same. If you want to know, you can see the previous article

enum	describe
start	Align with starting position
end	Align with end position
center	Center alignment
spaceBetween	Divide the remaining space into n-1 copies (n is the number of child controls), and insert each copy between the child controls
spaceEvenly	Divide the remaining space into N + 1 copies (n is the number of child controls) and distribute them evenly
spaceAround	Divide the remaining space into 2n copies (n is the number of child controls) and put one copy up and down each child control

WrapAlignment.start

WrapAlignment.center

WrapAlignment.end

WrapAlignment.spaceBetween

WrapAlignment.spaceEvenly

WrapAlignment.spaceAround

runAlignment

runAlignmentReceive oneWrapAlignmentEnumeration of types,WrapAlignmentThere are six enumeration values (followed byalignmentThe enumeration values of are the same,runAlignmentControl yes yesWrapThe alignment of the cross direction of the layout.
IfWrapThe layout is horizontal,runAlignmentControl isWrapVertical alignment.

verticalDirection

verticalDirectionThere are two valuesVerticalDirection.downandVerticalDirection.up, indicating which direction to start the layout from.
VerticalDirection.down

VerticalDirection.up

Note that when set toVerticalDirection.upThe first control isNumber 0It starts from the lowest left.

Spacing and runspacing

spacingRepresents the distance in the spindle direction of the child control,runSpacingThe spacing of child controls in the crossing direction.
Layout in a horizontal directionWrapIs medium,spacingRepresents the spacing between child controls in the horizontal direction,runSpacingRepresents the vertical spacing of child controls.

space
spacebe equal to10Look like

spacebe equal to40Look like

runSpacing
runSpacingbe equal to10Look like

runSpacingbe equal to40Look like

To experience the operation effect of the above example, you can go to my GitHub warehouse projectflutter_app->lib->routes->wrap_page.dartView it, and you can download it, run it and experience it.

---