Row 是水平擺放的控件
Row的屬性
| 屬性名 | 功能 |
|---|---|
| mainAxisAlignment | 主軸的排序方式 |
| crossAxisAlignment | 次軸的排序方式 |
| children | 組件子元素 |
| MainAxisSize | 在主軸方向占有空間的值蠢莺，默認是max 根據(jù)傳入的布局約束條件治专，最大化主軸方向的可用空間與max相反属瓣，是最小化主軸方向的可用空間 |
| VerticalDirection | 定義了children擺放順序，默認是down刊橘。down：從top到bottom進行布局up：從bottom到top進行布局。 |
MainAxisAlignment的屬性
| 屬性名 | 功能 |
|---|---|
| center | 將children放置在主軸的中心 |
| end | 將children放置在主軸的末尾 |
| spaceAround | 將主軸方向上的空白區(qū)域均分赏迟，使得children之間的空白區(qū)域相等，但是首尾child的空白區(qū)域為1/2 |
| spaceBetween | 將主軸方向上的空白區(qū)域均分届良，使得children之間的空白區(qū)域相等，首尾child都靠近首尾圣猎，沒有間隙 |
| spaceEvenly | 將主軸方向上的空白區(qū)域均分士葫，使得children之間的空白區(qū)域相等，包括首尾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
