GridView简介：
可以创建网格列表视图；主要通过Count、extent、custom、builder构造列表。有内边距、是否反向、滑动控制器等属性。 四个属性使用场景，Count、extent、custom适用于子布局较少时使用。可能会用到上拉刷新，数据较多时，则使用builder属性。
使用场景：
列如：支付宝首页的网格布局，等一系列网格样式的UI都可以使用该组件
属性作用scrollDirection滚动方向crossAxisCount主轴一行的数量mainAxisSpacing主轴每行间距crossAxisSpacing交叉轴每行间距childAspectRatioitem的宽高比1 / 2
class CustomGridView extends StatelessWidget {
final data = List.generate(128, (i) => Color(0xFFFF00FF - 2 * i));
@override
Widget build(BuildContext context) {
return Container(
child: GridView.count(
crossAxisCount: 3,
mainAxisSpacing: 12,
crossAxisSpacing: 20,
childAspectRatio: 1 / 0.5,
children: data.map((color) => _buildItem(color)).toList(),
),
);
}
Container _buildItem(Color color) => Container(
alignment: Alignment.center,
width: 100,
height: 30,
color: color,
child: Text(
colorString(color),
style: TextStyle(color: Colors.white, shadows: [
Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)
]),
),
);
String colorString(Color color) =>
"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}
可以看到，每行展示3个item，主轴间距20，横轴间距12。item的宽度是高度的2倍
属性scrollDirection：Axis.horizontal
布局横轴滑动
属性：GridView.builder
GridView.builder(
itemCount: data.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 12,
crossAxisSpacing: 20,
childAspectRatio: 1 / 0.7,
),
itemBuilder: (_, position) => _buildItem(data[position]),
)
这个效果，宽度与高度的比例是1/0.7。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。
|
标签： #Flutter #gridview
