[Flutter required]-Flex layout fully read

The foreword 0.

Flex layout is one of the five generals of Flutter. The father of Flutter has no son, and its sons Row and Column are also powerful

If you are confused by the mainAxisAlignment or crossAxisAlignment, this article will help you get them under your wing. Take a look at the position of the father and son in the Flutter layout: the multi-component layout

1. Overview of Flex properties

Axial: 2.direction:Axis

Enum Axis {horizontal, vertical, vertical}Copy the code

That is, horizontal discharge or vertical discharge, and you can see that by default, it’s the top of the spindle, and the cross axis is centered

For example, the horizontal axis is the horizontal axis, and the cross axis is vertical. That is, the horizontal top and the vertical center. MultiShower is used here to quickly show the difference. MultiShower is shown for details

var direction =[Axis.horizontal,Axis.vertical];
var show = MultiShower(direction,(e){
  return Flex(
    direction: e,
    children: <Widget>[redBox,blueBox,yellowBox,greenBox],

  );
},color: Colors.black12,width: 300,height: 200);

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

var blueBox= Container(
  color: Colors.blue,
  height: 30,
  width: 60,
);

var yellowBox= Container(
  color: Colors.yellow,
  height: 50,
  width: 100,
);

var greenBox= Container(
  color: Colors.green,
  height: 60,
  width: 60,
);
Copy the code

3. Spindle direction:mainAxisAlignment:MainAxisAlignment

The arrangement rule of the main axis, here take horizontal as an example, the main axis is horizontal. The vertical analogy will do

Enum MainAxisAlignment {start,// end,// center,// spaceBetween,// spaceBetween,// Other evenly split spaceAround,// middle kids evenly split, and kids at both ends evenly splitCopy the code

testMainAxisAlignment(){
  var redBox= Container(
    color: Colors.red,
    height: 50,
    width: 50,
  );

  var blueBox= Container(
    color: Colors.blue,
    height: 30,
    width: 60,
  );

  var yellowBox= Container(
    color: Colors.yellow,
    height: 10,
    width: 10,
  );

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

  var mainAxisAlignment =[
  MainAxisAlignment.start,MainAxisAlignment.center,
  MainAxisAlignment.end,MainAxisAlignment.spaceAround,
  MainAxisAlignment.spaceBetween,MainAxisAlignment.spaceEvenly];

  var show = MultiShower(mainAxisAlignment,(e){
    return Flex(
      direction: Axis.horizontal,
      mainAxisAlignment: e,
      children: <Widget>[redBox,blueBox,yellowBox,greenBox],

    );
  },color: Colors.black12,width: 200,height: 150);
  return show;
}
Copy the code

4. Cross axis direction:crossAxisAlignment:CrossAxisAlignment

Enum CrossAxisAlignment {start,// end,// center,// stretch,// baseline}Copy the code

Again, the horizontal axis, the cross axis is the vertical axis, and here you can see their layout behavior

Which need to be aware of is CrossAxisAlignment baseline must be textBaseline when using the textBaseline sure alignment of which is that the baseline, divided into alphabetic and ideographic

testCrossAxisAlignment(){ var redBox= Container( color: Colors.red, height: 50, width: 50, ); var blueBox= Container( color: Colors.blue, height: 30, width: 60, ); var yellowBox= Container( color: Colors.yellow, height: 10, width: 10, ); var greenBox= Container( color: Colors.green, height: 50, width: 10, ); var crossAxisAlignment =[CrossAxisAlignment.start,CrossAxisAlignment.center, CrossAxisAlignment.end,CrossAxisAlignment.stretch,CrossAxisAlignment.baseline]; var show = MultiShower(crossAxisAlignment,(e){ return Flex( direction: Axis.horizontal, crossAxisAlignment: E, textBaseline: textBaseline alphabetic, / / baseline type children: < widgets > [kiosks, blueBox yellowBox, greenBox],); },color: Colors.black12,width: 200,height: 140); return show; }Copy the code

5. Spindle size :mainAxisSize

enum MainAxisSize {
  min,
  max,
}
Copy the code

When the parent container’s width is not constrained,Flex defaults to stretching itself as far as possible, which is mainAxissie.max

When changed to mainAxissize.min, it does not extend its own area and wraps the content

testMainAxisSize(){
  var redBox= Container(
    color: Colors.red,
    height: 50,
    width: 50,
  );

  var blueBox= Container(
    color: Colors.blue,
    height: 30,
    width: 60,
  );

  var yellowBox= Container(
    color: Colors.yellow,
    height: 10,
    width: 10,
  );

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

  return Center(child: Flex(
    direction: Axis.horizontal,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[redBox,blueBox,yellowBox,greenBox],

  ),);
}
Copy the code

6. Text direction:textDirection:TextDirection

Enum TextDirection {LTR,// from left to right,// from right to left}Copy the code

This is very easy to understand, so I don’t have to say more

testTextDirection(){
  var redBox= Container(
    color: Colors.red,
    height: 50,
    width: 50,
  );

  var blueBox= Container(
    color: Colors.blue,
    height: 30,
    width: 60,
  );

  var yellowBox= Container(
    color: Colors.yellow,
    height: 10,
    width: 10,
  );

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

  var textDirection =[TextDirection.ltr,TextDirection.rtl];
  var show = MultiShower(textDirection,(e){
    return Flex(
      direction: Axis.horizontal,
      textDirection: e,
      children: <Widget>[redBox,blueBox,yellowBox,greenBox],

    );
  },color: Colors.black12,width: 200,height: 140);
  return show;
}
Copy the code

7. Vertical sorting:verticalDirection:VerticalDirection

enum VerticalDirection{
    up,
    down,
}
Copy the code

testVerticalDirection(){
  var redBox= Container(
    color: Colors.red,
    height: 50,
    width: 50,
  );

  var blueBox= Container(
    color: Colors.blue,
    height: 30,
    width: 60,
  );

  var yellowBox= Container(
    color: Colors.yellow,
    height: 10,
    width: 10,
  );

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

  var verticalDirection =[VerticalDirection.up,VerticalDirection.down];

  var show = MultiShower(verticalDirection,(e){
    return Flex(
      direction: Axis.vertical,
      verticalDirection: e
      children: <Widget>[redBox,blueBox,yellowBox,greenBox],

    );
  },color: Colors.black12,width: 200,height: 140);

  return show;
}
Copy the code

8. Baseline alignment:textBaseline:TextBaseline

enum TextBaseline {
  alphabetic,
  ideographic,
}
Copy the code

TestTextBaseline (){var redBox= TextStyle(fontSize: 20,backgroundColor: color.red); var blueBox= Text( "toly",style: TextStyle(fontSize: 50,backgroundColor: Colors.blue), ); var yellowBox= Text( "1994",style: TextStyle(fontSize: 30,backgroundColor: Colors.green), ); var textBaseline =[TextBaseline.alphabetic,TextBaseline.ideographic]; var show = MultiShower(textBaseline,(e){ return Flex( direction: Axis.horizontal, crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: e, children: <Widget>[redBox,blueBox,yellowBox], ); },color: Colors.black12,width: 300,height: 140); return show; }Copy the code

At this point, the Flex layout in Flutter is completely interpreted.

The Row of Flutter is direction: Axis. Horizontal,Column is direction: Axis. Vertical, and other properties are similar.

Expanded and Flex — [Updated at 2019.1.22]

There is also a point about Expanded, which is also more reliable, and it can be combined with Flex layouts to change the size of the child

C1: green C2: red C3: yellow 1).expanded -- C2: C1 and C3 will remain unchanged, c2 extends itself to fill the remaining part 2). Expanded-- C2 and C3, eventually c2 and C3 are the same length 3). Expanded-- C1, C2, and C3, eventually C1, C2, and C3 are all of the same lengthCopy the code

9. Write a small example using Flex layout

Here’s a layout to actually see Flex’s power

• Let’s start with a quick analysis

1. The top, middle and bottom three lines can be used as Column 2. The first line consists of ICONS, text and text. The middle is a bit more complicated, with a Row containing two parts, a two-line Column on the left and the text 4 on the right. At the bottom is a Row and the spindle alignment is startCopy the code

• Layout code

showItem() { var infoStyle = TextStyle(color: Color(0xff999999), fontSize: 13); var littleStyle = TextStyle(color: Colors.black, fontSize: 16); Var top = Row(// top,Expanded middle children: <Widget>[image.asset ("images/icon_head.png", width: 20, height: 20), Expanded(child: Padding(child: Text(" margin-top "), Padding: EdgeInsets. Only (left: 4), ), ), Text( "Flutter/Dart", style: infoStyle, ) ], ); Var content = Column(// middle text, cross axis is start mainAxisSize: mainAxisSize. Min, crossAxisAlignment: CrossAxisAlignment. Start, and the children: "Widget > [Text (" [required] Flutter - Flex layout completely interpretation", style: littleStyle, maxLines: 2, overflow: TextOverflow.ellipsis, ), Padding( child: Text(" horizontal axis is horizontal, cross axis is vertical, cross axis is vertical ") "> < span style: infoStyle, maxLines: 2, overflow: textoverflow. ellipsis), padding: EdgeInsets.only(top: 5), ), ], ); Var center = Row(// Children: <Widget>[Expanded(child: Padding(child: content, Padding: EdgeInsets.all(5), )), ClipRRect( borderRadius: BorderRadius.all(Radius.circular(5)), child: Image.asset("images/wy_300x200.jpg", width: 80, height: 80, fit: BoxFit.cover),) ], ); Var end = Row(// bottom children: <Widget>[Icon(Icons. Grade, color: color.green, size: 20,), Text("1000W", style: infoStyle, ), Padding(child:Icon(Icons.tag_faces, color: Colors.lightBlueAccent, size: 20), padding: EdgeInsets.symmetric(horizontal: 5),), Text("2000W", style: infoStyle), ], ); Var result = Card(Container(height: 160, color: Colors. White, padding: EdgeInsets. All (10), child: Column(children: <Widget>[top, Expanded(child: center), end]))); return result; }Copy the code

conclusion

This is the end of this article. If you want to taste Flutter quickly, Flutter For Seven days is a must-have. If you want to explore it, follow in my footsteps and complete a Flutter tour. In addition, I have a Flutter wechat communication group. You are welcome to join and discuss Flutter issues together. My wechat account is ZDL1994328.