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时才该值有效果。
具体效果看图(图片从网上截取)
水平方向平均分布####
mainAxisAlignment: MainAxisAlignment.spaceAround,
不灵活水平布局
不灵活就是根据Row子元素的大小,进行布局。如果子元素不足,它会留有空隙,如果子元素超出,它会警告。
比如现在我们要制作三个按钮,并让三个按钮同时在一排。
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'),
),
],
)
),
);
}