Flutter 列表组件(GridView)

Flutter 列表组件(GridView),与ListView一样,GridView也是非常常用的组件,两者的属性很相近,系统提供了几种GridView的构建方法,下面一一分析。酷客教程的Flutter GridView也对GridView做了简单介绍,请大家参考。

1)GridView.count
用法如下:

class GridViewDemo extends StatelessWidget {
  List<Widget> _getItem() {
List<Widget> list = [];
for (int i = 0; i < 100; i++) {
  list.add(_getWidget(i));
}
return list;
  }

  Widget _getWidget(int index) {
return Container(
  height: 30,
  alignment: Alignment.center,
  color: Colors.black12,
  child: Text(index.toString()),
);
  }

  @override
  Widget build(BuildContext context) {
return GridView.count(
  scrollDirection: Axis.vertical,
  crossAxisCount: 3,
  mainAxisSpacing: 10,
  crossAxisSpacing: 10,
  childAspectRatio: 3 / 4,
  padding: EdgeInsets.all(3),
  children: _getItem(),
);
  }
}

2)GridView.builder
用法如下:

class GridViewDemo extends StatelessWidget {
  List<Widget> _getItem() {
List<Widget> list = [];
for (int i = 0; i < 100; i++) {
  list.add(_getWidget(i));
}
return list;
  }

  Widget _getWidget(int index) {
return Container(
  height: 30,
  alignment: Alignment.center,
  color: Colors.black12,
  child: Text(index.toString()),
);
  }

  @override
  Widget build(BuildContext context) {

return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    mainAxisSpacing: 20,
    crossAxisSpacing: 10,
    childAspectRatio: 1),
itemBuilder: (BuildContext context, int index) {
  return _getWidget(index);
});
  }
}

3)GridView.custom
用法如下:

import 'package:flutter/material.dart';

class GridViewDemo extends StatelessWidget {
  List<Widget> _getItem() {
List<Widget> list = [];
for (int i = 0; i < 100; i++) {
  list.add(_getWidget(i));
}
return list;
  }

  Widget _getWidget(int index) {
return Container(
  height: 30,
  alignment: Alignment.center,
  color: Colors.black12,
  child: Text(index.toString()),
);
  }

  @override
  Widget build(BuildContext context) {

return GridView.custom(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 3,
  mainAxisSpacing: 20,
  crossAxisSpacing: 10,
  childAspectRatio: 3/4),
  childrenDelegate: SliverChildBuilderDelegate((context, index) {
return _getWidget(index);
  }),
  semanticChildCount: 100,
);
  }
}

运行效果如图所示:
Flutter 列表组件(GridView)

酷客网相关文章:

赞(0)

评论 抢沙发

评论前必须登录!