介绍
GridView
和ListView
的大多数参数都是相同的,它们的含义也都相同,唯一需要关注的是
gridDelegate
参数,类型是SliverGridDelegate
,它的作用是控制GridView
子组件如何排列(layout)Flutter中提供了两个
SliverGridDelegate
的子类SliverGridDelegateWithFixedCrossAxisCount
和SliverGridDelegateWithMaxCrossAxisExtent
SliverGridDelegateWithFixedCrossAxisCount
该子类实现了一个横轴为固定数量子元素的layout算法
crossAxisCount 横轴子元素的数量 mainAxisSpacing 主轴方向的间距 crossAxisSpacing 横轴方向子元素的间距 childAspectRatio 子元素在横轴长度和主轴长度的比例。
由于
crossAxisCount
指定后,子元素横轴长度就确定了,然后通过此参数值就可以确定子元素在主轴的长度可以发现,子元素的大小是通过
crossAxisCount
和childAspectRatio
两个参数共同决定的。注意,这里的子元素指的是子组件的最大显示空间,注意确保子组件的实际大小不要超出子元素的空间。可以有以下两种定义方式
GridView( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, //横轴三个子widget childAspectRatio: 1.0 //宽高比为1时,子widget ) ) GridView.count( crossAxisCount: 3, childAspectRatio: 1.0, )
SliverGridDelegateWithMaxCrossAxisExtent
该子类实现了一个横轴子元素为固定最大长度的layout算法
maxCrossAxisExtent
为子元素在横轴上的最大长度,之所以是“最大”长度,是因为横轴方向每个子元素的长度仍然是等分的,举个例子,如果ViewPort的横轴长度是450,那么当maxCrossAxisExtent
的值在区间[450/4,450/3)内的话,子元素最终实际长度都为112.5,而childAspectRatio
所指的子元素横轴和主轴的长度比为最终的长度比。其它参数和SliverGridDelegateWithFixedCrossAxisCount
相同。两种方式是等价的
GridView( padding: EdgeInsets.zero, gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( maxCrossAxisExtent: 120.0, childAspectRatio: 2.0 //宽高比为2 ), children: <Widget>[ Icon(Icons.ac_unit), Icon(Icons.airport_shuttle), Icon(Icons.all_inclusive), Icon(Icons.beach_access), Icon(Icons.cake), Icon(Icons.free_breakfast), ], ); GridView.extent( maxCrossAxisExtent: 120.0, childAspectRatio: 2.0, children: <Widget>[ Icon(Icons.ac_unit), Icon(Icons.airport_shuttle), Icon(Icons.all_inclusive), Icon(Icons.beach_access), Icon(Icons.cake), Icon(Icons.free_breakfast), ], );
GridView.builder
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() { runApp(MyAppText()); } class MyAppText extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( backgroundColor: Colors.red, title: Text('GridView练习'), textTheme: TextTheme(title: TextStyle(fontSize: 18, color: Colors.yellow)), ), body: GridViewClass(), ), ); } } class GridViewClass extends StatelessWidget { @override Widget build(BuildContext context) { List<String>list=new List(); list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844156&di=f1c754f5753835912ddf00f763e13e65&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Ffd039245d688d43fb6973ae77d1ed21b0ef43bec.jpg'); list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844156&di=21132fe8a0731c3f3823a2602b5bb6c3&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F023b5bb5c9ea15ce1274e73ab4003af33a87b26e.jpg'); list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844155&di=21f352bf854d3546967dd9c5f199c467&imgtype=0&src=http%3A%2F%2Fimg1.lukou.com%2Fstatic%2Fp%2Fblog%2Fmedium%2F0007%2F15%2F94%2F26%2F7159426.jpg'); list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844154&di=66885dff3735acc2170b4c3c6290ef03&imgtype=0&src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2016%2F415%2F534%2F3377435514_434466171.jpg'); list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844152&di=732c41d365e9c0c25c95745f6c12b96e&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20181220%2F4866e7e0dd434dc9aa8da2c6ccc436d6.jpg'); return GridView.builder( itemCount: list.length, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 4, childAspectRatio: 1 ), itemBuilder: (BuildContext context,var index){ return Image.network( list[index], fit: BoxFit.fill, ); } ); } }