GridView 详解

柔光的暖阳◎ 2021-09-13 15:32 438阅读 0赞

**一、主要参数：**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>scrollDirection</td> 
   <td>Axis</td> 
   <td>滚动方法</td> 
  </tr> 
  <tr> 
   <td>padding</td> 
   <td>EdgeInsetsGeometry</td> 
   <td>内边距</td> 
  </tr> 
  <tr> 
   <td>resolve</td> 
   <td>bool</td> 
   <td>组件反向排序</td> 
  </tr> 
  <tr> 
   <td>crossAxisSpacing</td> 
   <td>double</td> 
   <td>水平子 Widget 之间间距</td> 
  </tr> 
  <tr> 
   <td>mainAxisSpacing</td> 
   <td>double</td> 
   <td>垂直子 Widget 之间间距</td> 
  </tr> 
  <tr> 
   <td>crossAxisCount</td> 
   <td>int</td> 
   <td>一行的 Widget 数量</td> 
  </tr> 
  <tr> 
   <td>childAspectRatio</td> 
   <td>double</td> 
   <td>子 Widget 宽高比例</td> 
  </tr> 
  <tr> 
   <td>children</td> 
   <td></td> 
   <td><code>&lt;Widget&gt;[ ]</code></td> 
  </tr> 
  <tr> 
   <td>gridDelegate</td> 
   <td>SliverGridDelegateWithFixedCrossAxisCount（常用）</td> 
   <td>控制布局主要用在GridView.builder 里面</td> 
  </tr> 
 </tbody> 
</table>

**二、代码示例：**  
**1、GridView.count 简单示例**  
适用场景：当子widget数量比较少时，可以快速的创建固定数量子元素的GridView

List<Widget> _listData = []; // 添加自定义 Widget 组件，如包裹的图片文字的Container容器  
    
    @override
    Widget build(BuildContext context) {
    	// TODO: implement build
    	return GridView.count(
    		// 内边距
    		padding: EdgeInsets.all(20), 
    		// 横轴元素个数
    		crossAxisCount: 2,
    		 // 横轴间距
     		crossAxisSpacing: 20,
     		// 纵轴间距
     		mainAxisSpacing: 20,
     		// 子组件宽高长度比例
     		childAspectRatio:0.7,
     		children: _listData
     		);
    }

**2、GridView.builder 简单示例**

\*\*适合场景：\*\*当子widget比较多时，可以通过GridView.builder来动态创建子widget

> 注意：该方法没有内边距

List<Widget> _listData = []; // 添加自定义 Widget 组件，如包裹的图片文字的Container容器  
    
    @override
    Widget build(BuildContext context) {
    	// TODO: implement build
    	return GridView.builder(
    		// _listData 的元素个数
    		itemCount: _listData.length,
    		// _listData 的数据 
    		itemBuilder: _listData,
    		gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    			// 横轴元素个数
    			crossAxisCount: 2, 
    			// 纵轴间距
    			mainAxisSpacing: 20.0,
    			// 横轴间距
    			crossAxisSpacing: 10.0,
    			// 子组件宽高长度比例
    			childAspectRatio: 1.0
    		)
    	);
    }