Row and Column are inherited Flex elastic layouts
Horizontal layout, ok
Row(// Horizontal alignment of child widgets is the offset of the overall position, left, center, right, and so on. MainAxisAlignment only makes sense when mainAxissize.max MainAxisAlignment. Start, // If textDirection. LTR is left-aligned, RTL is right-aligned MainAxisAlignment: MainAxisAlignment center, / / center alignment / / MainAxisAlignment: End, // TextDirection. LTR is right-aligned and RTL is left-aligned. MainAxisAlignment spaceAround, / / screen to keep a certain gap between widgets, equal to the distance between the child widgets / / MainAxisAlignment: MainAxisAlignment spaceBetween, / / screen and son leave no gap between widgets, equal to the distance between the child widgets / / MainAxisAlignment: MainAxisAlignment spaceEvenly, / / the screen between the child widgets, equal to the distance between the child widgets / / on the horizontal direction, the size of the Row to occupy mainAxisSize: MainAxisSize. Max,// Default as much as possible // MainAxisSize: MainAxisSize. Min,// as small as possible, wrap // in verticalDirection, child widget alignment, overall offset, refer to verticalDirection // crossAxisAlignment: CrossAxisAlignment. Start, / / VerticalDirection down on alignment / / CrossAxisAlignment: Centered CrossAxisAlignment center, / / / / CrossAxisAlignment: CrossAxisAlignment. Stretch, / / CrossAxisAlignment: CrossAxisAlignment. End, alignment under / / / / CrossAxisAlignment: CrossAxisAlignment baseline, / / on the horizontal direction, orientation of child widgets, / / textDirection: textDirection. LTR, / / / / textDirection from left to right: Textdirection. RTL,// From right to left // verticalDirection: verticalDirection. Up,// From bottom up // verticalDirection: VerticalDirection down, / / / / down on textBaseline: textBaseline. Alphabetic, / / textBaseline: TextBaseline.ideographic, children: <Widget>[ // Text(" flutter good ",style: TextStyle(backgroundColor: Colors.green),), Text(" bad rn ",style: TextStyle(backgroundColor: Colors.blue),), // Text(" complex native ",style: TextStyle(backgroundColor: Colors.orange),), ], ),Copy the code##### Various cases of MainAxisAlignment
class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment center, the children: "Widget > [Row (MainAxisAlignment: MainAxisAlignment center, / / center alignment mainAxisSize: Mainaxissize.max,// Default values as much as possible to occupy children: <Widget>[// Text(" flutter good ",style: TextStyle(backgroundColor: Colors.green),), Text(" bad rn ",style: TextStyle(backgroundColor: Colors.blue),), // Text(" complex native ",style: TextStyle(backgroundColor: Colors.orange),), ], ), Row( mainAxisAlignment: MainAxisAlignment. Start, / / / / in the horizontal direction, the size of the Row to occupy mainAxisSize: mainAxisSize. Max, / / the default value As much as possible to occupy the children: <Widget>[Text(" MainAxisSize. Max when MainAxisAlignment various situations ",style: TextStyle(backgroundColor: Colors. Green),),],), Row (mainAxisAlignment: mainAxisAlignment. Start, / / / / in the horizontal direction, the size of the Row to occupy mainAxisSize: MainAxisSize. Max,// Default values as much as possible to occupy children: <Widget>[Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),), Text(" start ",style: TextStyle(backgroundColor: Colors.blue),), Text(" complex ",style: TextStyle(backgroundColor: Colors.orange),), ], ), Row( mainAxisAlignment: MainAxisAlignment center, / / center alignment / / on the horizontal direction, the size of the Row to occupy mainAxisSize: mainAxisSize. Max, / / the default value As much as possible to occupy the children: <Widget>[ Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),), Text(" center ",style: TextStyle(backgroundColor: Colors.blue),), Text(" complex ",style: TextStyle(backgroundColor: Color.orange),),],), Row(mainAxisAlignment: mainAxisAlignment. End,// // In the horizontal direction, this Row occupies the size of mainAxisSize: MainAxisSize. Max,// Default values as much as possible to occupy children: <Widget>[Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),), Text(" end ",style: TextStyle(backgroundColor: Colors.blue),), Text(" complex ",style: TextStyle(backgroundColor: Colors.orange),), ], ), Row( mainAxisAlignment: MainAxisAlignment spaceEvenly, / / the screen edge and widgets, between the child widgets, gap isometric / / on the horizontal direction, the size of the Row to occupy mainAxisSize: MainAxisSize. Max,// Default values as much as possible to occupy children: <Widget>[Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),), Text(" spaceEvenly ",style: TextStyle(backgroundColor: Colors.blue),), Text(" complex ",style: TextStyle(backgroundColor: Colors.orange),), ], ), Row( mainAxisAlignment: MainAxisAlignment spaceBetween, / / the screen edge, no gap between the child widgets equal gap / / on the horizontal direction, the size of the Row to occupy mainAxisSize: MainAxisSize. Max,// Default values as much as possible to occupy children: <Widget>[Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),), Text(" spaceBetween ",style: TextStyle(backgroundColor: Colors.blue),), Text(" complex ",style: TextStyle(backgroundColor: Colors.orange),), ], ), Row( mainAxisAlignment: MainAxisAlignment spaceAround, / / / / in the horizontal direction, the size of the Row to occupy mainAxisSize: mainAxisSize. Max, / / the default value As much as possible to occupy the children: <Widget>[ Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),), Text(" spaceAround ",style: TextStyle(backgroundColor: Colors.blue),), Text(" complex ",style: TextStyle(backgroundColor: Colors.orange),), ], ), ], ), ), ); }}Copy the codeColumn
Attributes are the same as rows, except that the effect is vertical