Padding & Row & Column & Expanded – flutter

Padding

1
2
3
4
5
6
7
8
9
10

Padding(
padding: EdgeInsets.fromLTRB(0, 0, 10, 10),

child: Image.network(
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2767608770,826089718&fm=26&gp=0.jpg",
width: 190,
// height: 150,
fit: BoxFit.cover,
)
);

Row

1
2
3
4
5
6
7
8
9

Row(
children: [
IconContainer(Icons.search, iconColor: Colors.white, containerColor: Colors.blue),
IconContainer(Icons.home, iconColor: Colors.white, containerColor: Colors.pink),
IconContainer(Icons.anchor, iconColor: Colors.white, containerColor: Colors.green),
],
mainAxisAlignment: MainAxisAlignment.center, //元素在一行内的左右位置调整
crossAxisAlignment: CrossAxisAlignment.center, //整行元素上下位置调整
);

Column

1
2
3
4
5
6
7
8
9

Column(
children: [
IconContainer(Icons.search, iconColor: Colors.white, containerColor: Colors.blue),
IconContainer(Icons.home, iconColor: Colors.white, containerColor: Colors.pink),
IconContainer(Icons.anchor, iconColor: Colors.white, containerColor: Colors.green),
],
mainAxisAlignment: MainAxisAlignment.start, //元素上下位置调整
crossAxisAlignment: CrossAxisAlignment.start, //整列元素的左右位置调整
);

Expanded

1
2
3
4
5
6
7
8
9
10
11
12
13

//左侧占三分之一, 右侧占三分之二
Row(
children: [
Expanded(
child: IconContainer(Icons.home, iconColor: Colors.white, containerColor: Colors.blue),
flex: 1,
),
Expanded(
child: IconContainer(Icons.anchor, iconColor: Colors.white, containerColor: Colors.green),
flex: 2 ,
),
],
)

1
2
3
4
5
6
7
8
9
10
11

Row(
children: [
//第一列宽度为原始大小, 第二列填充
IconContainer(Icons.home, iconColor: Colors.white, containerColor: Colors.blue),

Expanded(
child: IconContainer(Icons.anchor, iconColor: Colors.white, containerColor: Colors.green),
flex: 1 ,
),
],
);