Flutter-GridView

简介:

一个可以滚动的2D数组组件;类似Android的GridView,都是列表容器,用法跟ListView类似,网格布局,一行可以有多个项,整个Widget可以滚动,常见效果照片瀑布流.

基本用法

创建一个列表

继承关系

Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > ScrollView > BoxScrollView > GridView

构造方法

GridView({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, @required SliverGridDelegate gridDelegate, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true, bool addSemanticIndexes: true, double cacheExtent, List<Widget> children: const [], int semanticChildCount })

GridView.builder({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, @required SliverGridDelegate gridDelegate, @required IndexedWidgetBuilder itemBuilder, int itemCount, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true, bool addSemanticIndexes: true, double cacheExtent, int semanticChildCount })

GridView.count({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, @required int crossAxisCount, double mainAxisSpacing: 0.0, double crossAxisSpacing: 0.0, double childAspectRatio: 1.0, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true, bool addSemanticIndexes: true, double cacheExtent, List<Widget> children: const [], int semanticChildCount, DragStartBehavior dragStartBehavior: DragStartBehavior.start })

GridView.custom({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, @required SliverGridDelegate gridDelegate, @required SliverChildDelegate childrenDelegate, double cacheExtent, int semanticChildCount, DragStartBehavior dragStartBehavior: DragStartBehavior.start })

GridView.extent({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, @required double maxCrossAxisExtent, double mainAxisSpacing: 0.0, double crossAxisSpacing: 0.0, double childAspectRatio: 1.0, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true, bool addSemanticIndexes: true, List<Widget> children: const [], int semanticChildCount, DragStartBehavior dragStartBehavior: DragStartBehavior.start })

属性介绍

• childrenDelegate → SliverChildDelegate 为GridView提供子视图的委托。自定义构造函数允许显式指定此委托。其他构造函数创建一个包装给定子列表的子委托。
• gridDelegate → SliverGridDelegate GridView中子元素布局的委托。自定义构造函数允许显式指定此委托。其他构造函数隐式地创建gridDelegate。
• anchor → double 决定scrollOffset = 0分割线在viewport的位置（0 <= anchor <= 1.0）
• cacheExtent → double 缓存区域
• center → Key 滑动主轴方向的第一个child
• controller → ScrollController 控制child滚动时候的位置。
• dragStartBehavior → DragStartBehavior 确定滑动手势时间,DragStartBehavior.start, DragStartBehavior.down
• padding → EdgeInsetsGeometry 距离父边距的padding
• physics → ScrollPhysics 滚动的视图如何响应用户的输入。
• primary → bool 是否是与父节点的PrimaryScrollController所关联的主滚动视图。
• reverse → bool 默认是从上或者左向下或者右滚动的，这个属性控制是否反向，默认值为false，不反向滚动
• scrollDirection → Axis 滚动的方向，有垂直和水平两种，默认为垂直方向（Axis.vertical）。
• semanticChildCount → int 子child数量

示例代码:

class MyGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('GridView'),
        backgroundColor: Colors.black,
      ),
      body: _getWidgetCustom(context),
    );
  }

  //生成数据源
  List<String> getDataList() {
    List<String> mLists = [];
    for (int i = 0; i < 50; i++) {
      mLists.add(i.toString());
    }
    return mLists;
  }

  //生成gridView widget
  List<Widget> getWidgetList() {
    return getDataList().map((item) => getChildWidget(item)).toList();
  }

  Widget getChildWidget(String item) {
    return Container(
      alignment: Alignment.center,
      child: Text(
        item,
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      color: Colors.blue,
    );
  }

  //count方式构造
  Widget _getWidgetCount(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      crossAxisSpacing: 20.0,
      mainAxisSpacing: 10.0,
      childAspectRatio: 1.0,
      padding: EdgeInsets.all(5.0),
      children: getWidgetList(),
    );
  }

  //builder--SliverGridDelegateWithFixedCrossAxisCount方法
  Widget _getWidgetBuilder(BuildContext context) {
    return GridView.builder(
        itemCount: getDataList().length,
        padding: EdgeInsets.all(5.0),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          mainAxisSpacing: 20.0,
          crossAxisSpacing: 10.0,
          childAspectRatio: 1.0,
        ),
        itemBuilder: (BuildContext context, int index) {
          return getChildWidget(getDataList()[index]);
        });
  }

  //builder--SliverGridDelegateWithMaxCrossAxisExtent方式
  Widget _getWidgetBuilder2(BuildContext context) {
    return GridView.builder(
        itemCount: getDataList().length,
        padding: EdgeInsets.all(5.0),
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 100.0, //单个子widget的水平最大宽度
          mainAxisSpacing: 20.0, //水平子widget的间距
          crossAxisSpacing: 10.0, //垂直间距
          childAspectRatio: 1.0,
        ),
        itemBuilder: (BuildContext context, int index) {
          return getChildWidget(getDataList()[index]);
        });
  }

  //custom方式构造
  Widget _getWidgetCustom(BuildContext context) {
    return GridView.custom(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
            mainAxisSpacing: 20.0,
            crossAxisSpacing: 20.0,
            childAspectRatio: 1.0),
        childrenDelegate:
            SliverChildBuilderDelegate((BuildContext context, int position) {
          return getChildWidget(getDataList()[position]);
        }, childCount: getDataList().length));
  }
}

效果:

image.png