This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

1. The layout

1.1 Row & Column & Stack

Row can arrange its child widgets horizontally, in a horizontal layout. A Column can arrange its children vertically, which can be understood as a vertical layout. The Stack, which allows the subcomponents to be stacked, is a cascading layout, which can be understood as the Z-axis.

1.2 Alignment

class LayoutDemo extends StatelessWidget { const LayoutDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Container( color: Colors.yellow, alignment: Const Alignment(0,0), child: Row(children: [Icon(Icons. Add,size: 30,), Icon(Icons. Ac_unit,size: 60,), Icon(Icons.baby_changing_station,size: 90,), ], ), ); }}Copy the code

After running the container, we get the following graph, where we see that x has no effect on the row, because the row is as wide as the Container is wide, so x has no effect on the row. It follows that Y has no effect on Column, and Stack has no effect on both.

 return Container(
      color: Colors.yellow,
      alignment: const Alignment(0, 0),
      child: Column(
        children: [
          Container(
            color: Colors.red,
            child: Icon(
              Icons.add,
              size: 90,
            ),
          ),
          Container(
            color: Colors.blue,
            child: Icon(
              Icons.ac_unit,
              size: 60,
            ),
          ),
          Container(
            color: Colors.white,
            child: Icon(
              Icons.baby_changing_station,
              size: 30,
            ),
          ),
        ],
      ),
    );
Copy the code

After running, it is found that Y has no effect on Column.

Here’s the Stack situation, and you can see that it does all matter.

1.3 the main shaft

In row, the spindle is X, which defaults to right, and in Column, Y, which defaults to down. The main spindle alignment attributes are: Start, end, Center, spaceBetween, spaceAround, spaceinstituted. Using text Direction you can change the Direction of the main axis.

Start is normal left alignment, so I’m not going to test it here.

Assign the mainAxisAlignment of Row to mainAxisAlignment. End.

mainAxisAlignment: MainAxisAlignment.end,
Copy the code

When you run it, you get the image below and see that it is aligned to the right.

Assign Row’s mainAxisAlignment to mainAxisalign.center.

To the Row mainAxisAlignment assignment for mainAxisAlignment. SpaceBetween.

To the Row mainAxisAlignment assignment for mainAxisAlignment. SpaceBetween, here is the rest of the space between average distribution and control.

To Row mainAxisAlignment assignment for mainAxisAlignment. SpaceAround, here is the average of the rest of the space distribution around small controls.

To the Row mainAxisAlignment assignment for mainAxisAlignment. SpaceEvenly. This is the average of the remaining space and the widgets.

1.4 cross shaft

A cross axis is an axis perpendicular to the principal axis.

To the inside of the Row crossAxisAlignment set as crossAxisAlignment. Start, you can see three head icon is aligned.

Set the crossAxisAlignment in the Row to crossAxisAlignment. End, and you can see that the bottom of the three ICONS are aligned.

To the inside of the Row crossAxisAlignment set as crossAxisAlignment. Center, you can see the center of the three icon is aligned.

CrossAxisAlignment baseline, need textBaseline use collocation, or complains. Change ICONS into text to see what they look like. It turns out that the bottom of the text is aligned.

1.5 Expanded

Expanded only acts as a child of Flex (otherwise you get an error) and can scale up the space taken up by Flex child components. Because Row and Column inherit from Flex, Expanded can also be their child. All Expanded partitions the total free space of the spindle in proportion to their Flex. Wrap the Container inside the children of the Row in Expanded.

return Container( color: Colors.yellow, alignment: const Alignment(0, 0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline. Alphabetic, children: [Expanded(child: color: color. red, child: Text(' hello ', style: TextStyle(fontSize: 20),),), Expanded(child: Container(color: color. blue, child: Text(' femaleness ', style: TextStyle(fontSize: 40),),), Expanded(child: Container(color: Colors. White, child: Text(' monkey ', style: TextStyle(fontSize: 60), ), ), ), ], ), );Copy the code

When you run it, you see three texts bisecting the main axis of the row. It wraps automatically if you run out of space. In Expanded, setting the size in the spindle direction makes no sense, that is, setting width in a Row does not take effect, and setting height in a column does not take effect.

4. To summarize

  • Layout components
    • Center. Make the child part display in the center of the part
    • Properties of the relative position in a Container
  • Alignment. Parameters: x and y
    • The origin is in the middle
  • Row&Column
    • Layout the Row horizontally.
      • The sub-parts are arranged in the main axis (transverse) direction. The main axis goes from left to right
    • Layout columns vertically.
      • The sub-parts are arranged in the main axis (longitudinal). The main axis goes from top to bottom
    • Each UI widget can be viewed as a rectangular “box”
    • Each box has an outer Margin and an inner Margin padding.
    • Spindle: MainAxisAlignment
      • SpaceBetween: The rest of the space is evenly distributed between widgets!!
      • SpaceAround: The remaining space is evenly distributed around the widget!!
      • Spaceinstituted: The rest of the space will be evenly split with the widgets!!
      • Align start in the direction of the beginning of the spindle.
      • End is aligned towards the end of the main axis.
      • Center Center the main axis.
    • Cross axis: CrossAxisAlignment perpendicular to the main axis
      • Baseline: text bottom alignment
      • Center: align the cross axes in the center.
      • End: aligned towards the end of the intersecting axis. ;
      • Start: align in the direction of the beginning of the crossing axis;
      • Stretch: fill the cross axis direction;
  • Expanded Fill layout
    • There is no gap left in the principal axis. Expanded wrapped parts are stretched and compressed
    • The spindle is horizontal and the width is meaningless
    • Spindle longitudinal, height setting is meaningless
    • When Text is Expanded wrapped, Text can be wrapped automatically. This is also called flexible layout.