Row 是水平摆放的控件
Row的属性
| 属性名 | 功能 |
|---|---|
| mainAxisAlignment | 主轴的排序方式 |
| crossAxisAlignment | 次轴的排序方式 |
| children | 组件子元素 |
| MainAxisSize | 在主轴方向占有空间的值，默认是max 根据传入的布局约束条件，最大化主轴方向的可用空间与max相反，是最小化主轴方向的可用空间 |
| VerticalDirection | 定义了children摆放顺序，默认是down。down：从top到bottom进行布局up：从bottom到top进行布局。 |
MainAxisAlignment的属性
| 属性名 | 功能 |
|---|---|
| center | 将children放置在主轴的中心 |
| end | 将children放置在主轴的末尾 |
| spaceAround | 将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2 |
| spaceBetween | 将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙 |
| spaceEvenly | 将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child |
| start | 将children放置在主轴的起点 |
CrossAxisAlignment 的属性
| 属性名 | 功能 |
|---|---|
| baseline | 在交叉轴方向，使得children的baseline对齐 |
| center | children在交叉轴上居中展示 |
|end|children在交叉轴上末尾展示|
|start|children在交叉轴上起点处展示|
|stretch|让children填满交叉轴方向|
/*
*ROW 水平布局组件
*/
class RowView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.black26,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconContainer(Icons.home, color: Colors.red),
IconContainer(Icons.search, color: Colors.blue),
IconContainer(Icons.send, color: Colors.orange),
],
),
);
}
}
class IconContainer extends StatelessWidget {
double size;
IconData icon;
Color color;
IconContainer(this.icon, {this.size, this.color = Colors.blue}) {
this.size = 32.0;
}
@override
Widget build(BuildContext context) {
return Container(
width: this.size + 60,
height: this.size + 60,
color: this.color,
child: Center(
child: Icon(
this.icon,
color: Colors.white,
size: this.size,
),
),
);
}
}
效果
image.png
Column 组件 垂直布局
/*
*column 垂直布局组件
*/
class ColumnView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 800,
width: 500,
color: Colors.black26,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconContainer(Icons.home, color: Colors.red),
IconContainer(Icons.search, color: Colors.blue),
IconContainer(Icons.send, color: Colors.orange),
],
),
);
}
}
image.png
Expanded 组件 比例组件
/*
* Expanded 可以用在 column 跟Row 布局中, 主要是类型一种比例分配的作用
*
*/
class ExpandedDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 1,
child: IconContainer(Icons.hdr_off),
),
SizedBox(
width: 10.0,
),
Expanded(
flex: 3,
child: IconContainer(Icons.account_box),
)
],
),
);
}
}
image.png
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: Image.network('https://www.itying.com/images/flutter/4.png',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.all(10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 1,
child: IconContainer(Icons.hdr_off),
),
SizedBox(
width: 10.0,
),
Expanded(
flex: 3,
child: IconContainer(Icons.account_box),
)
],
),
)
],
);
}
}
image.png
