Expanded is used in the Flutter layout

Expanded is used in the Flutter to evenly divide the layout usage (similar to the weight set in the Android LinearLayout control), but some pits are encountered in the flutter and the pit trip begins………..

Column

A Column that contains Expanded is normally displayed

Widget _columnExpanded() {return new Column(
      children: <Widget>[

        new Expanded(child: new Text("Expanded by half.")),

        new Text("Unexpanded half"),]); }Copy the code

Both columns contain Expanded, but the Text content increases, and if maxLines: 3 is not added, it wraps automatically. If the crossAxisAlignment property is not set then new Text(” unexpanded half “) will center the control because crossAxisAlignment in Column defaults to all centered

 Widget _columnMoreExpanded() {return new Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[

        new Expanded(
            child: new Text("It's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded,"
                "Well, there's a half of it, there's a half of it, there's a half of it, there's a half of it.",
              maxLines: 3,
            )
        ),

        new Text("Unexpanded half"),]); }Copy the code

The three columns contain Expanded, but using Column in Expanded to load multiple controls looks fine

/* * Expanded nested Column control And then put two Text inside the Column control to appear * */ Widget_columnExpandedMoreWidget() {return new Column(
    children: <Widget>[

      new Expanded(
          child: new Column(
            children: <Widget>[
              new Text("It's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded,",
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
              new Text("It's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded,",
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              )
            ],
          )
      ),

      new Text("Unexpanded half"),]); }Copy the code

Four columns contain Expanded, and adding only one Expanded Row inside Expanded will appear on the screen, as shown below :(out of the screen)

Widget _columnExpandedMoreRowWidget() {return new Column(
   children: <Widget>[

     new Expanded(
         child: new Row(
           children: <Widget>[
             new Expanded(child: new Text("It's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded,",
               maxLines: 2,
               overflow: TextOverflow.ellipsis,
             )),
             new Text("It's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded,",
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
             )
           ],
         )
     ),

     new Text("Unexpanded half"),]); }Copy the code

Seeing that the screen is out of bounds, expand both Text controls in the Row as follows:

Widget _columnExpandedMoreRowWidget1() {return new Column(
   children: <Widget>[

     new Expanded(
         child: new Row(
           children: <Widget>[
             new Expanded(child: new Text("It's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded,",
               maxLines: 2,
               overflow: TextOverflow.ellipsis,
             )),
             new Expanded(child: new Text("It's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded,",
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
             )),
           ],
         )
     ),

     new Text("Unexpanded half"),]); }Copy the code

Off-screen prompt eliminated. As shown in figure

Widget _columnExpandedMoreRowWidget1() {return new Column(
   children: <Widget>[

     new Expanded(
         child: new Row(
           children: <Widget>[
             new Expanded(child: new Text("It's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded,",
               maxLines: 2,
               overflow: TextOverflow.ellipsis,
             )),
             new Expanded(child: new Text("Expanded by half.",
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
             )),
           ],
         )
     ),

     new Text("Unexpanded half"),]); }Copy the code

The code is as follows:

Widget _columnExpandedMoreRowWidget1() {return new Column(
   children: <Widget>[

     new Expanded(
         child: new Row(
           children: <Widget>[
             new Expanded(child: new Text("It's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded,",
               maxLines: 2,
               overflow: TextOverflow.ellipsis,
             )),
             new Text("There's a half of a half of a half of a half of a half.",
               maxLines: 2,
               overflow: TextOverflow.ellipsis,
             ),
           ],
         )
     ),
     new Text("Unexpanded half"),]); }Copy the code

Remove a Expanded setting from the Row and it becomes

Row

The fourth Column in the Row indicates that the Row is not arranged properly, and the Text does not wrap

Widget _rowExpandedMoreWidget() {return new Row(
   children: <Widget>[

     new Expanded(
         child: new Row(
           children: <Widget>[
             new Expanded(child: new Text("It's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded,",
               maxLines: 2,
               overflow: TextOverflow.clip,
             ),),
             new Expanded(child: new Text("It's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded, it's half Expanded,",
               maxLines: 2,
               overflow: TextOverflow.clip,
             ),),
           ],
         )
     ),

     new Text("Unexpanded half"),]); }Copy the code

The Row must be evenly split between two horizontal controls, or the other control in the Row must not be too wide to display outside the boundary. Always wrap lines in Column