| Flutter页面布局：Padding边距，Row水平布局，Column垂直布局，Expanded，Wrap流式布局 | 您所在的位置：网站首页 › flutter下载器 › Flutter页面布局：Padding边距，Row水平布局，Column垂直布局，Expanded，Wrap流式布局 |
Flutter页面布局：Padding边距，Row水平布局，Column垂直布局，Expanded，Wrap流式布局
|
1.Padding
在 html 中常见的布局标签都有 padding 属性，但是 Flutter 中很多 Widget 是没有 padding 属性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。 这是一个网格列表： 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,), ], );
效果如下：
示例代码： 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,), ); } }
其使用方式以及相关参数与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, ), ], ), );
expanded常与row和colunm一起使用。 常用属性flex作用是控制元素占整个父 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, ),), ], );
当一侧使用expanded，另一侧不使用时，使用expanded的一侧将自适应： return Row( children: [ Expanded( flex: 1, child: IconContainer( Icons.home, color: Colors.blue, ), ), IconContainer( Icons.home, color: Colors.red, ), ], );
实现类似这样的布局 对间距的控制要灵活应用SizedBox 效果如下： Wrap 可以实现流布局，单行的 Wrap 跟 Row 表现几乎一致，单列的 Wrap 则跟 Column 表现几乎一致。但 Row 与 Column 都是单行单列的，Wrap 则突破了这个限制，mainAxis 上空间不足时，则向crossAxis上去扩展显示。 |
因为image组件没有padding属性，所以我们在Padding中来设置image：
但是此时最右边不是我们期望的样子，我们希望最右侧也有10的距离，那么我们可以将整个GridView放入Padding中，如下： 
最后样式： 
我们可以使用Row进行水平布局： 
mainAxisAlignment和crossAxisAlignment的使用示例：
【本文地址】
公司简介
联系我们