flutter GridView 九宫格

简介: * GridView的构造函数方法,一次性构建所有的子条目,适用于少量数据* GridView.builder方式来构建,懒加载模式,适用于大量数据的情况* GridView.count方式来构建,适用于固定列的情况,适用于少量数据 GridView.extent 方式来构建,适用于条目有最大宽度的限制的情况,适用于少量数据的情况下 * GridView.custom 方式来构建,可配置子条目的排列规则也可配置子条目的渲染加载模式

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。

重要消息


GridView 九宫格

在这里插入图片描述

1 引言

GridView是常用可滚动组件之一,在Flutter中通常使用GridView构建二维网格列表,GridView创建方法有五种,描述如下

  • GridView的构造函数方法,一次性构建所有的子条目,适用于少量数据
  • GridView.builder方式来构建,懒加载模式,适用于大量数据的情况
  • GridView.count方式来构建,适用于固定列的情况,适用于少量数据 GridView.extent
    方式来构建,适用于条目有最大宽度的限制的情况,适用于少量数据的情况下
  • GridView.custom
    方式来构建,可配置子条目的排列规则也可配置子条目的渲染加载模式

2 滑动组件的公有属性

GridView也是滑动组件系列中的一个,它也有滑动组件一些公用的属性,简单描述如下:

 ///滑动方向 
  Axis scrollDirection = Axis.vertical,
  ///是否滑动到底部
  bool reverse = false,
  ///滑动控制器
  ScrollController controller,
  ///是否使用默认的控制器
  bool primary,
  ///滑动到边界时的回弹效果
  ScrollPhysics physics,
  ///内边距
  EdgeInsetsGeometry padding,

3 通过GridView的构造函数来创建

通过GridView的构造函数来构建,通过参数children来构建GridView中使用到的所有的子条目,通过参数gridDelegate配置SliverGridDelegate来配置子条目的排列规则。

SliverGridDelegate声明为abstract抽象的,所以需要使用它的子类来构建。

SliverGridDelegate有两个直接的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent。

通过SliverGridDelegateWithFixedCrossAxisCount来构建一个横轴为固定数量的子条目的GridView,如图1所示。

在这里插入图片描述

对应代码如下:


///GridView的基本使用
class GridViewBaseUsePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ScrollHomePageState();
  }
}

class ScrollHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: Text("GridView基本使用"),
      ),
      ///构建九宫格数据数据
      body: buildGridView1(),
//      body: buildGridView2(),
    );
  }
  ///GridView 的基本使用
  ///通过构造函数来创建
  Widget buildGridView1() {
    return GridView(
      ///子Item排列规则
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //横轴元素个数
          crossAxisCount: 3,
          //纵轴间距
          mainAxisSpacing: 10.0,
          //横轴间距
          crossAxisSpacing: 10.0,
          //子组件宽高长度比例
          childAspectRatio: 1.4),
      ///GridView中使用的子Widegt
      children: buildListViewItemList(),
    );
  }
  ///GridView 的基本使用
  ///通过custom方式来创建
  Widget buildGridView() {
    return GridView.custom(
      cacheExtent: 200,
        ///子Item排列规则
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          ///子Item的最大宽度
          maxCrossAxisExtent: 100,
          //纵轴间距
          mainAxisSpacing: 10.0,
          //横轴间距
          crossAxisSpacing: 10.0,
          //子组件宽高长度比例
          childAspectRatio: 1.4,
        ),
        ///子条目的构建模式
        childrenDelegate:
            ///懒加载的模式
            SliverChildBuilderDelegate((BuildContext context, int index) {
          return buildListViewItemWidget(index);
        }));
  }


  List<Widget> buildListViewItemList(){
    List<Widget> list = [];
    ///模拟的8条数据
    for (int i = 0; i < 8; i++) {
      list.add(buildListViewItemWidget(i));
    }
    return list;
  }

  ///创建GridView使用的子布局
  Widget buildListViewItemWidget(int index) {
    return new Container(
      ///内容剧中
      alignment: Alignment.center,

      ///根据角标来动态计算生成不同的背景颜色
      color: Colors.cyan[100 * (index % 9)],
      child: new Text('grid item $index'),
    );
  }
}

其他4中创建方式请在公众号中回复 九宫格 查看


公众号 我的大前端生涯

相关文章
|
3月前
Flutter 列表学习(listview,gridview,ExpansionTile,ScrollController,RefreshIndicator)
Flutter 列表学习(listview,gridview,ExpansionTile,ScrollController,RefreshIndicator)
|
5月前
|
索引
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/GridView
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/GridView
49 0
|
Web App开发 测试技术 索引
Flutter Web网站之ScrollView+GridView优化
Flutter Web网站之ScrollView+GridView优化
198 0
Flutter Web网站之ScrollView+GridView优化
【布局 widget】 Flutter GridView
GridView 独有的参数其实只有一个 gridDelegate,gridDelegate 的作用是为 GridView 布局,制定每行几个 child,空白多少等。
148 0
【布局 widget】 Flutter GridView
flutter系列之:flutter中常用的GridView layout详解
GridView是一个网格化的布局,如果在填充的过程中子组件超出了展示的范围的时候,那么GridView会自动滚动。 因为这个滚动的特性,所以GridView是一个非常好用的Widget。今天我们一起来探索一下GridView这个layout组件的秘密。
flutter系列之:flutter中常用的GridView layout详解
|
前端开发 Java 开发工具
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
310 0
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
Flutter之 GridView
Flutter之 GridView
124 0
Flutter之 GridView
【Flutter】GridView 网格布局 ( GridView.count 构造函数 | crossAxisCount 参数指定每行元素个数 )
【Flutter】GridView 网格布局 ( GridView.count 构造函数 | crossAxisCount 参数指定每行元素个数 )
503 0
【Flutter】GridView 网格布局 ( GridView.count 构造函数 | crossAxisCount 参数指定每行元素个数 )
|
Android开发 容器
Flutter入门:组件Card、SafeArea、PageView、GridView
Card Card对应Material Design中的CardView,使用很简单 Card的两个特点就是阴影和圆角。
568 0
|
4天前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin