1.Padding
Common layout tags in html have padding attributes, but many widgets in Flutter do not have padding attributes. At this time, we can use the Padding component to handle the direct spacing between the container and the child elements.
Here is a grid list:
return GridView.count(
crossAxisCount: 2,//列数
childAspectRatio: 1.7,//表格宽高比例
Image.network('https://cdn.pixabay.com/photo/2023/03/09/20/02/cat-7840767_640.jpg',
fit: BoxFit.cover,//填充网格
),
Image.network('https://cdn.pixabay.com/photo/2023/03/08/10/11/crocuses-7837426__340.jpg',fit: BoxFit.cover,),
Image.network('https://cdn.pixabay.com/photo/2023/03/09/02/53/girl-7839121__340.jpg',fit: BoxFit.cover,),
Image.network('https://cdn.pixabay.com/photo/2023/03/06/15/29/bee-7833738__340.jpg',fit: BoxFit.cover,),
Image.network('https://cdn.pixabay.com/photo/2023/03/07/13/18/fruit-7835730__340.jpg',fit: BoxFit.cover,),
Image.network('https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058__340.jpg',fit: BoxFit.cover,),
Image.network('https://cdn.pixabay.com/photo/2023/03/09/20/02/cat-7840767_640.jpg',fit: BoxFit.cover,),
Image.network('https://cdn.pixabay.com/photo/2023/03/08/10/11/crocuses-7837426__340.jpg',fit: BoxFit.cover,),
Image.network('https://cdn.pixabay.com/photo/2023/03/09/02/53/girl-7839121__340.jpg',fit: BoxFit.cover,),
Image.network('https://cdn.pixabay.com/photo/2023/03/06/15/29/bee-7833738__340.jpg',fit: BoxFit.cover,),
Image.network('https://cdn.pixabay.com/photo/2023/03/07/13/18/fruit-7835730__340.jpg',fit: BoxFit.cover,),
Image.network('https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058__340.jpg',fit: BoxFit.cover,),
],
);
Because the image component has no padding attribute, we set the image in Padding:
return GridView.count(
crossAxisCount: 2, //列数
childAspectRatio: 1.7, //表格宽高比例
children: [
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://cdn.pixabay.com/photo/2023/03/09/20/02/cat-7840767_640.jpg',
fit: BoxFit.cover, //填充网格
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://cdn.pixabay.com/photo/2023/03/08/10/11/crocuses-7837426__340.jpg',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://cdn.pixabay.com/photo/2023/03/09/02/53/girl-7839121__340.jpg',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://cdn.pixabay.com/photo/2023/03/06/15/29/bee-7833738__340.jpg',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://cdn.pixabay.com/photo/2023/03/07/13/18/fruit-7835730__340.jpg',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058__340.jpg',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://cdn.pixabay.com/photo/2023/03/09/20/02/cat-7840767_640.jpg',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://cdn.pixabay.com/photo/2023/03/08/10/11/crocuses-7837426__340.jpg',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://cdn.pixabay.com/photo/2023/03/09/02/53/girl-7839121__340.jpg',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://cdn.pixabay.com/photo/2023/03/06/15/29/bee-7833738__340.jpg',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://cdn.pixabay.com/photo/2023/03/07/13/18/fruit-7835730__340.jpg',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058__340.jpg',
fit: BoxFit.cover,
),
),
]);
The effect is as follows:
But at this time, the far right is not what we expect, we hope that there is also a distance of 10 on the far right, then we can put the entire GridView into Padding, as follows: final
style:
2. Row horizontal layout component
Sample code:
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return IconContainer(Icons.home,color: Colors.blue,);
}
}
class IconContainer extends StatelessWidget{
double? size=32.0;
Color? color=Colors.red;
IconData icon;
IconContainer(this.icon,{
this.size,this.color});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
height: 100,
width: 100,
color: this.color,
child: Icon(this.icon,size: this.size,color: Colors.lightGreen,),
);
}
}
We can use Row for horizontal layout:
example of mainAxisAlignment and crossAxisAlignment:
return Container(
width: 400,
height: 600,
color: Colors.green,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主轴排序方式
crossAxisAlignment: CrossAxisAlignment.stretch, //次轴的排序方式,较少用
children: [
IconContainer(
Icons.home,
color: Colors.blue,
),
IconContainer(
Icons.home,
color: Colors.red,
),
IconContainer(
Icons.home,
color: Colors.amber,
),
],
),
);
3. Coloum vertical layout
Its usage and related parameters are exactly the same as row:
return Container(
width: 400,
height: 600,
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主轴排序方式
crossAxisAlignment: CrossAxisAlignment.stretch, //次轴的排序方式,较少用
children: [
IconContainer(
Icons.home,
color: Colors.blue,
),
IconContainer(
Icons.home,
color: Colors.red,
),
IconContainer(
Icons.home,
color: Colors.amber,
),
],
),
);
The horizontal and vertical layout axes are different, the horizontal layout axis is the x axis, and the vertical axis is the y axis
4.Expanded
Expanded is often used together with row and colunm.
The commonly used attribute flex is used to control the proportion of the element to the entire parent Row/Column
return Row(
children: [
Expanded(
flex: 1,
child: IconContainer(
Icons.home,
color: Colors.blue,
),),
Expanded(
flex: 2,
child: IconContainer(
Icons.home,
color: Colors.red,
),),
],
);
When one side uses expanded and the other side does not, the side that uses expanded will adapt:
return Row(
children: [
Expanded(
flex: 1,
child: IconContainer(
Icons.home,
color: Colors.blue,
),
),
IconContainer(
Icons.home,
color: Colors.red,
),
],
);
practise:
achieve a layout like this
return Column(
children: [
Container(
height: 180,
color: Colors.black,
),
SizedBox(height: 10,),
Row(
children: [
Expanded(
flex: 2,
child: Container(
height: 180,
child: Image.network('https://cdn.pixabay.com/photo/2023/03/07/13/18/fruit-7835730__340.jpg',fit: BoxFit.cover,),
)),
SizedBox(width: 10,),
Expanded(
flex: 1,
child: Container(
height: 180,
child: ListView(
children: [
Container(
//height: 90,
child: Image.network('https://cdn.pixabay.com/photo/2023/03/08/10/11/crocuses-7837426__340.jpg'),
),
SizedBox(height: 10,),
Container(
//height: 90,
child: Image.network('https://cdn.pixabay.com/photo/2023/03/09/20/02/cat-7840767_640.jpg'),
)
],
)
),
)
],
)
],
);
To control the spacing, the SizedBox
effect should be flexibly applied as follows:
5. Wrap flow layout
Wrap can implement flow layout, single-row Wrap has almost the same performance as Row, and single-column Wrap has almost the same performance as Column. However, both Row and Column are single-row and single-column, and Wrap breaks through this limitation. When the space on the mainAxis is insufficient, it will expand the display to the crossAxis.
