|
| 1 | +## **GridView** |
| 2 | + |
| 3 | +> |
| 4 | +GridView是自带滚动的二维列表组件。 |
| 5 | + |
| 6 | +### 构造方法 |
| 7 | +``` |
| 8 | +GridView({ |
| 9 | + Key key, |
| 10 | + Axis scrollDirection: Axis.vertical, |
| 11 | + bool reverse: false, |
| 12 | + ScrollController controller, |
| 13 | + bool primary, |
| 14 | + ScrollPhysics physics, |
| 15 | + bool shrinkWrap: false, |
| 16 | + EdgeInsetsGeometry padding, |
| 17 | + @required SliverGridDelegate gridDelegate, |
| 18 | + bool addAutomaticKeepAlives: true, |
| 19 | + bool addRepaintBoundaries: true, |
| 20 | + bool addSemanticIndexes: true, |
| 21 | + double cacheExtent, |
| 22 | + List<Widget> children: const [], |
| 23 | + int semanticChildCount |
| 24 | +}) |
| 25 | +``` |
| 26 | +### 高级用法 |
| 27 | +``` |
| 28 | +GridView.builder // 动态加载，用于分页较多 |
| 29 | +GridView.count // 指定数据加载 |
| 30 | +GridView.custom |
| 31 | +GridView.extent |
| 32 | +``` |
| 33 | + |
| 34 | +### 用例 |
| 35 | +> GridView.count |
| 36 | +指定长度创建子组件 |
| 37 | +- crossAxisCount：必填，指定列数 |
| 38 | +- children: 子组件 |
| 39 | +- reverse：默认false, 当为true时反转滚动方向，即上到下反转成下到上，左到右反转成右到左 |
| 40 | +- controller: ScrollController类，能初始化滚动相关的属性，如位置，也能监听滚动变化 |
| 41 | +- primary: 默认true, 当填充数量调试不足以产生滚动条，滚动组件时，不影响最外层滚动条，即界面不随着手势滚动。 |
| 42 | +- primary: false, 且controller=null（或者ScrollContorller中的initialScrollOffset属性为0），GridView.count的数量较少不足产生滚动条时，滚动主体为最外层滚动条。 |
| 43 | +- physics: ScrollPhysics类，影响视图与用户输入交互。 |
| 44 | +- shrinkWrap: 默认false, 滚动视图内容展开和收缩时不重新计算视图大小，例如外层height=200, 滚动的内容可能增加了expendTile，展开后的内容超过了200高，这时候会报错，此时修改shrinkWrap=true，即滚动视图会重新计算。 |
| 45 | +- scrollDirection：默认Axis.vertical.，垂直方向，可通过Axis.horizontal修改为水平方向。 |
| 46 | +- mainAxisSpacing: 主轴方向间距, 主轴方向由scrollDirection确定 |
| 47 | +- crossAxisSpacing: 副轴方向间距, |
| 48 | +- childAspectRatio: 子元素中宽高比，宽度由ViewPort/crossAxisCount确定 |
| 49 | + |
| 50 | + ``` |
| 51 | + GridView.count( |
| 52 | + crossAxisCount: 3, |
| 53 | + reverse: false, |
| 54 | + scrollDirection: Axis.vertical, |
| 55 | + controller: ScrollController( |
| 56 | + initialScrollOffset: 0.0, |
| 57 | + ), |
| 58 | + crossAxisSpacing: 10.0, |
| 59 | + mainAxisSpacing: 20.0, |
| 60 | + childAspectRatio: 2, |
| 61 | + physics: BouncingScrollPhysics(), |
| 62 | + primary: false, |
| 63 | + children: List.generate(15, (index) { |
| 64 | + return Container( |
| 65 | + decoration: BoxDecoration( |
| 66 | + border: Border.all( |
| 67 | + color: Colors.redAccent, |
| 68 | + ), |
| 69 | + ), |
| 70 | + child: Center( |
| 71 | + child: Text('Item $index', |
| 72 | + style: Theme.of(context).textTheme.headline), |
| 73 | + ), |
| 74 | + ); |
| 75 | + }, growable: false), |
| 76 | + ), |
| 77 | + ); |
| 78 | + ``` |
| 79 | + |
| 80 | +> GridView.extent |
| 81 | +指定长度创建子组件 |
| 82 | +- maxCrossAxisExtent: 设置副轴最大单项宽度，如外层容器宽度100, maxCrossAxisExtent为50，单行显示2个widget，如果外层容器变成150,则单行显示3个widget.如果超过容器宽度，或者单行没法满足两个，则按照一行填充1个widget。下面代码可以通过修改scrollDirection方向来看到不同效果。 |
| 83 | + |
| 84 | + ``` |
| 85 | + GridView.extent( |
| 86 | + scrollDirection: Axis.vertical, |
| 87 | + maxCrossAxisExtent: 150, |
| 88 | + mainAxisSpacing: 10, |
| 89 | + crossAxisSpacing: 10, |
| 90 | + childAspectRatio: 1, |
| 91 | + children: List.generate( |
| 92 | + 10, |
| 93 | + (index) { |
| 94 | + return Container( |
| 95 | + decoration: BoxDecoration( |
| 96 | + border: Border.all( |
| 97 | + width: 0.1, |
| 98 | + ) |
| 99 | + ), |
| 100 | + child: Image.network('https://dianhu-1253537286.cos.eu-moscow.myqcloud.com/efoxfile/Moschat/ojbk.png'), |
| 101 | + ); |
| 102 | + }, |
| 103 | + ), |
| 104 | + ), |
| 105 | + ); |
| 106 | + ``` |
| 107 | + |
| 108 | +> GridView.custom |
| 109 | +动态创建子组件 |
| 110 | +- SliverGridDelegate gridDelegate : 布局相关 |
| 111 | +- SliverChildDelegate childrenDelegate：动态创建子组件 |
| 112 | + |
| 113 | + ``` |
| 114 | + gridDelegate: SliverGridDelegateWithFixedCrossAxisCount 单行最大数量布局 |
| 115 | + gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( |
| 116 | + crossAxisCount: 10, // 单行最大10个元素布局 |
| 117 | + ), |
| 118 | + gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent 单列最大宽度布局 |
| 119 | + gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( |
| 120 | + maxCrossAxisExtent: 100, // 单列最大宽度100 |
| 121 | + ), |
| 122 | + // 创建无限滚动 |
| 123 | + childrenDelegate: SliverChildBuilderDelegate( |
| 124 | + (context, index) { |
| 125 | + return Container( |
| 126 | + child: Text('$index'), |
| 127 | + ); |
| 128 | + }, |
| 129 | + // 滚动时回调函数 |
| 130 | + semanticIndexCallback: (widget, index) { |
| 131 | + print('index $index'); |
| 132 | + }, |
| 133 | + ), |
| 134 | + // 创建有数量的滚动 |
| 135 | + childrenDelegate: SliverChildListDelegate( |
| 136 | + List.generate(30, (index) { |
| 137 | + return Container( |
| 138 | + child: Text('index $index'), |
| 139 | + ); |
| 140 | + }), |
| 141 | + ), |
| 142 | + ``` |
| 143 | + ``` |
| 144 | + GridView.custom( |
| 145 | + // gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( |
| 146 | + // crossAxisCount: 10, // 单行最大10个元素布局 |
| 147 | + // ), |
| 148 | + gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( |
| 149 | + maxCrossAxisExtent: 100, // 单列最大宽度100 |
| 150 | + ), |
| 151 | + // childrenDelegate: SliverChildBuilderDelegate( |
| 152 | + // (context, index) { |
| 153 | + // return Container( |
| 154 | + // child: Text('$index'), |
| 155 | + // ); |
| 156 | + // }, |
| 157 | + // // 滚动时回调函数 |
| 158 | + // semanticIndexCallback: (widget, index) { |
| 159 | + // print('index $index'); |
| 160 | + // }, |
| 161 | + // ), |
| 162 | + // 数量滚滚动限制，类似GridView.count |
| 163 | + childrenDelegate: SliverChildListDelegate( |
| 164 | + List.generate(30, (index) { |
| 165 | + return Container( |
| 166 | + child: Text('index $index'), |
| 167 | + ); |
| 168 | + }), |
| 169 | + ), |
| 170 | + ) |
| 171 | + ``` |
| 172 | + |
| 173 | +> GridView.builder |
| 174 | +按需创建组件，跟custom差不多，但增加itemCount来限制加载子组件最大值，itemCount取代childrenDelegate来动态创建组件。 |
| 175 | +- itemCount： 子组件最大数量，默认没有限制。效果跟GridView.custom一致 |
| 176 | +- gridDelegate：设置布局，单行最大布局数量或单列单项最大长度，参考GridView.custom |
| 177 | +- itemBuilder：子组件动态加载回调方法，长度受itemCount值影响，itemCount不为0且存在时，数量需小于itemCount值 |
| 178 | + |
| 179 | + ``` |
| 180 | + GridView.builder( |
| 181 | + itemCount: 31, |
| 182 | + gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( |
| 183 | + crossAxisCount: 3, // 单行最大数量值 |
| 184 | + ), |
| 185 | + itemBuilder: (context, index) { |
| 186 | + print('index $index'); |
| 187 | + return Center( |
| 188 | + child: Text('index $index'), |
| 189 | + ); |
| 190 | + }, |
| 191 | + ), |
| 192 | + ``` |
| 193 | + |
| 194 | +### 其它补充 |
| 195 | +> ScrollPhysics |
| 196 | +- BouncingScrollPhysics |
| 197 | +- ClampingScrollPhysics |
| 198 | +- AlwaysScrollableScrollPhysics |
| 199 | +- NeverScrollableScrollPhysics |
| 200 | +> SliverGridDelegate |
| 201 | +- SliverGridDelegateWithFixedCrossAxisCount |
| 202 | +- SliverGridDelegateWithMaxCrossAxisExtent |
| 203 | +> SliverChildDelegate |
| 204 | +- SliverChildBuilderDelegate |
| 205 | +- SliverChildListDelegate |
| 206 | + |
| 207 | +### 实例 |
| 208 | + |
0 commit comments