Flutter开发之——可滑动组件—GridView

| 属性 | 说明 | 取值 |

| :-: | :-: | :-: |

| gridDelegate | 控制子控件的排列 | SliverGridDelegateWithFixedCrossAxisCount①

SliverGridDelegateWithMaxCrossAxisExtent |

| scrollDirection② | 滚动方向 | Axis枚举 |

| reverse | 是否反转滚动方向 | bool |

| controller | 滚动控制器 | ScrollController |

| physics③ | 滚动物理特性 | ScrollPhysics |

SliverGridDelegateWithFixedCrossAxisCount①

| 属性 | 说明 |

| :-: | :-: |

| crossAxisCount | 交叉轴方向上个数 |

| mainAxisSpacing | 主轴方向上2行之间的间隔 |

| crossAxisSpacing | 交叉轴方向上之间的间隔 |

| childAspectRatio | 子控件宽高比 |

scrollDirection②

| 属性 | 说明 |

| :-: | :-: |

| horizontal | 水平方向滚动 |

| vertical | 垂直方向滚动 |

physics③

| 属性 | 说明 |

| :-: | :-: |

| AlwaysScrollableScrollPhysics | 总是可以滑动 |

| NeverScrollableScrollPhysics | 禁止滚动 |

| BouncingScrollPhysics | 内容超过一屏 上拉有回弹效果 |

| ClampingScrollPhysics | 包裹内容 不会有回弹 |

三 构造方式创建GridView

---

3.1 代码

//State

ScrollController _gridViewController;

//State

@override

void initState() {

super.initState();

_gridViewController = ScrollController()

…addListener(() {

print(‘${_gridViewController.position}’);

});

}

//Widget build(BuildContext context)

GridView(

controller:_gridViewController,

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,crossAxisSpacing: 3, mainAxisSpacing: 3),

children: List.generate(50, (position) {

return Container(

alignment: Alignment.center,

height: 80,

color: Colors.primaries[position % Colors.primaries.length],

child: Text(“$position”),

);

}),

)

3.2 效果图

3.3 ScrollController打印结果

I/flutter (16530): ScrollPositionWithSingleContext#9a250(offset: 72.8, range: 0.0…1746.0, viewport: 444.0, ScrollableState, ClampingScrollPhysics -> RangeMaintainingScrollPhysics, DragScrollActivity#d503a(ScrollDragController#59958), ScrollDirection.reverse)

I/flutter (16530): ScrollPositionWithSingleContext#9a250(offset: 77.2, range: 0.0…1746.0, viewport: 444.0, ScrollableState, ClampingScrollPhysics -> RangeMaintainingScrollPhysics, DragScrollActivity#d503a(ScrollDragController#59958), ScrollDirection.reverse)

I/flutter (16530): ScrollPositionWithSingleContext#9a250(offset: 83.2, range: 0.0…1746.0, viewport: 444.0, ScrollableState, ClampingScrollPhysics -> RangeMaintainingScrollPhysics, DragScrollActivity#d503a(ScrollDragController#59958), ScrollDirection.reverse)

四 快速创建方式：build，custom，count，extent

---

4.1 GridView.build

构建必须属性

• itemBuilder是构建子控件

• itemCount指定数据个数

代码

GridView.builder(

itemCount: 10,

controller:_gridViewController,

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,crossAxisSpacing: 3, mainAxisSpacing: 3),

itemBuilder: (context,index){

return Container(

alignment: Alignment.center,

height: 80,

color: Colors.primaries[index % Colors.primaries.length],

child: Text(“$index”),

);

},

)

4.2 GridView.custom

构建必须属性

• childrenDelegate：提供子组件构建的代理，有SliverChildBuilderDelegate和SliverChildListDelegate可用于快速构建

快速构建代码

SliverChildBuilderDelegate方式

GridView.custom(

controller:_gridViewController,

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,crossAxisSpacing: 3, mainAxisSpacing: 3),

childrenDelegate: SliverChildBuilderDelegate((context,index){

return Container(

alignment: Alignment.center,

height: 80,

color: Colors.primaries[index % Colors.primaries.length],

child: Text(“$index”),

);

},childCount: 10) ,

)

SliverChildListDelegate方式

GridView.custom(

controller:_gridViewController,

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,crossAxisSpacing: 3, mainAxisSpacing: 3),

childrenDelegate: SliverChildListDelegate(List.generate(50, (position) {

return Container(

alignment: Alignment.center,

height: 80,

color: Colors.primaries[position % Colors.primaries.length],

child: Text(“$position”),

);})),

)

4.3 GridView.count

构建必须属性

crossAxisCount：交叉轴方向上个数

快速构建代码

总结

【Android 详细知识点思维脑图（技能树）】

其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。这只能说明 Android 中级以下的岗位饱和了，现在高级工程师还是比较缺少的，很多高级职位给的薪资真的特别高（钱多也不一定能找到合适的），所以努力让自己成为高级工程师才是最重要的。

这里附上上述的面试题相关的几十套字节跳动，京东，小米，腾讯、头条、阿里、美团等公司19年的面试题。把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节。

由于篇幅有限，这里以图片的形式给大家展示一小部分。

网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
套字节跳动，京东，小米，腾讯、头条、阿里、美团等公司19年的面试题。把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节。

由于篇幅有限，这里以图片的形式给大家展示一小部分。

[外链图片转存中…(img-L1NwRTev-1714985298436)]

网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！