row的属性
MainAxisSize： 控制自己的布局方式
MainAxisSize.min 默认值，Column和Row自适应children；
MainAxisSize.max Column填充父控件竖屏，Row填充父控件横屏；需要搭配MainAxisAlignment使用才有效果；
MainAxisAlignment： 控制子集的对齐方式，Column上下对齐，Row左右对齐
MainAxisAlignment.start 默认值，Column靠上，Row靠左；
MainAxisAlignment.center Column,Row居中；
MainAxisAlignment.end Column靠下，Row靠右；
MainAxisAlignment.spaceAround 自己填充，等份分配空间给子集，子集各自居中对齐；
MainAxisAlignment.spaceBetween 自己填充，等份分配空间给子集，子集两侧对齐；
MainAxisAlignment.spaceEvenly 自己填充，等份分配空间给子集，子集同一中线居中对齐；
注：当设置MainAxisSize.max时才该值有效果。
具体效果看图（图片从网上截取）
f8cb5836af3a85b7f3608fa1677806d.png
e6430dcb8bb6bd19d746aedf1d19af5.png
水平方向平均分布####
mainAxisAlignment: MainAxisAlignment.spaceAround,
不灵活水平布局
不灵活就是根据Row子元素的大小，进行布局。如果子元素不足，它会留有空隙，如果子元素超出，它会警告。
比如现在我们要制作三个按钮，并让三个按钮同时在一排。
0bd9a5cfc558d31e71f502cc5c04ce5.png
import 'dart:html';
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget
{
@override
Widget build(BuildContext context)
{
return MaterialApp(
title: 'Row Widget Demo',
home: Scaffold(
appBar: new AppBar(
title: new Text('水平方向布局'),
),
body: new Row(
children: <Widget>[
new RaisedButton(
onPressed: (){
},
color: Colors.redAccent,
child: new Text('Red Button'),
),
new RaisedButton(
onPressed: (){
},
color: Colors.blueAccent,
child: new Text('blue'),
),
new RaisedButton(
onPressed: (){
},
color: Colors.orangeAccent,
child: new Text('orange'),
),
],
)
),
);
}
}
这时候你会发现的页面已经有了三个按钮，但这三个按钮并没有充满一行，而是出现了空隙。这就是不灵活横向排列造成的。它根据子元素的大小来进行排列。如果我们想实现充满一行的效果，就要使用灵活水平布局了
灵活水平布局
解决上面有空隙的问题，可以使用 Expanded来进行解决，也就是我们说的灵活布局。我们在按钮的外边加入Expanded就可以了，代码如下：
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('水平方向布局'),
),
body:new Row(
children: <Widget>[
Expanded(child:new RaisedButton(
onPressed: (){
},
color:Colors.redAccent,
child:new Text('红色按钮')
)),
Expanded(child:new RaisedButton(
onPressed: (){
},
color:Colors.orangeAccent,
child: new Text('黄色按钮'),
)
),
Expanded(child:new RaisedButton(
onPressed: (){
},
color:Colors.pinkAccent,
child:new Text('粉色按钮')
)
)
],
)
),
);
}
}
这时候就可以布满一行了，三个按钮大小相等。不截图了
灵活与不灵活的混用
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget
{
@override
Widget build(BuildContext context)
{
return MaterialApp(
title: 'Row Widget Demo',
home: Scaffold(
appBar: new AppBar(
title: new Text('水平方向布局'),
),
body: new Row(
children: <Widget>[
new RaisedButton(
onPressed: (){
},
color: Colors.redAccent,
child: new Text('Red Button'),
),
Expanded(child:new RaisedButton(
onPressed: (){
},
color:Colors.blueAccent,
child: new Text('blue'),
)
),
new RaisedButton(
onPressed: (){
},
color: Colors.orangeAccent,
child: new Text('orange'),
),
],
)
),
);
}
2086b54c3e924c37072e4e567793cda.png
