Day 4 — Basic Control (2)+Flex layout detailed

The foreword 0.

The Flex layout is one of the five generals of Flutter, whose sons Row and Column are equally capable

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

1. Overview of Flex properties

Axial: 2.direction:Axis

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

Horizontal or vertical, and you can see that by default it’s the head of the main axis, and the cross axis is centered

For example, the horizontal axis is horizontal and the cross axis is vertical. So horizontal head, vertical center and here’s a quick show with MultiShower, to give you a better comparison of the differences, see MultiShower

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. Main axis direction:mainAxisAlignment:MainAxisAlignment

The layout of the main axis is regular. Here, the horizontal direction is taken as an example. The main axis is horizontal. Vertical analogy is fine

Enum MainAxisAlignment {start,// end,// center,// center spaceBetween,// end, Other evenly divided,// The middle child is evenly divided, and the two children are spaceEvenly divided,// Evenly dividedCopy 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. Direction of cross axis:crossAxisAlignment:CrossAxisAlignment

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

Once again, the horizontal axis is the vertical axis, and you can see their layout behavior here

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. MainAxisSize :mainAxisSize

enum MainAxisSize {
  min,
  max,
}
Copy the code

When the size of the parent container is unconstrained,Flex defaults to stretching itself as far as possible, which is mainAxisSize.max

When you change this to MainAxissize.min, it doesn’t extend its own area, it 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 RTL,// from right to left}Copy the code

That’s pretty easy to understand, so I won’t say much

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= Text(" baseline ",style: 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 the Flutter has been fully interpreted.

Horizontal and Column are direction: Axis. Vertical. All the other attributes are similar, which is a simplified version of Flex.

Expanded with Flex — [updated 2019.1.22]

The other thing about Expanded, which is also useful, is that it can be incorporated into a Flex layout to change the size of the child

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

conclusion

As we come to the end of this article, if you want to have a quick taste of the new Flutter, Seven Days of Flutter is for you. If you want to explore it, follow my footsteps and take a Flutter tour. In addition, I have a Wechat communication group with Flutter. Welcome to join my wechat group to discuss the problem of Flutter. My wechat signal is ZDL1994328.