Flutter基础篇（二十五，字节跳动前端面试题解析
[](
)SliverGridDelegateWithMaxCrossAxisExtent
该子类实现了一个横轴子元素固定最大长度的布局算法，构造函数：
SliverGridDelegateWithMaxCrossAxisExtent({
double maxCrossAxisExtent,
double mainAxisSpacing = 0.0,
double crossAxisSpacing = 0.0,
double childAspectRatio = 1.0,
})
maxCrossAxisExtent 为子元素在横轴上的最大长度，之所以是最大长度，是因为横轴方向每个子元素的长度依然是等分的。
示例：
class App extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: GridView(
padding: EdgeInsets.zero,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 120,
childAspectRatio: 2
),
children: [
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 也可以快速的实现上面这种效果。
[](
)GridView.builder
在上面的示例中，我们都是通过一个 Widget 列表作为子元素的，那么当元素较多时同样面临着加载问题。所以，GridView 中也提供了 builder 来动态创建子组件。
GridView.builder(
...
@required SliverGridDelegate gridDelegate,
@required IndexedWidgetBuilder itemBuilder,
)
示例：从一个异步数据源分批获取一些 Icon ，然后用 GridView 来展示。
class InfiniteGridView extends StatefulWidget{
@override
State createState() {
return _InfiniteGridViewState();
}
}
class _InfiniteGridViewState extends State{
List _icons = [];
void initState(){
super.initState();
_retrieveIcons();
}
void _retrieveIcons(){
Future.delayed(Duration(milliseconds: 200)).then((e){
setState(() {
_icons.addAll([
Icons.ac_unit,
Icons.airport_shuttle,
Icons.all_inclusive,
Icons.beach_access,
Icons.cake,
Icons.free_breakfast
]);
});
});
}
@override
Widget build(BuildContext context) {
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 1
),
itemCount: _icons.length,
itemBuilder: (context,index){
if(index == _icons.length - 1 && _icons.length < 200){
_retrieveIcons();
### 最后
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。
* **[CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://ali1024.coding.net/public/P7/Web/git)**
