GridView 组件

GridView 组件.png

SliverGridDelegateWithMaxCrossAxisExtent 该子类可以快速创建横轴子元素为固定长度的 GridView。
SliverGridDelegateWithFixedCrossAxisCount 该子类可以快速创建横轴子元素为固定数量的 GridView。

//导入Material UI 组件库
import 'package:flutter/material.dart';

//程序入口
void main() {
  runApp(const MaterialApp(
      debugShowCheckedModeBanner: false, home: GridViewWidget()));
}

class GridViewWidget extends StatefulWidget {
  const GridViewWidget({Key? key}) : super(key: key);

  @override
  State createState() => _GridViewWidgetState();
}

class _GridViewWidgetState extends State<GridViewWidget> {
  final List<IconData> _icons = [];

  @override
  void initState() {
    super.initState();
    // 初始化数据
    _retrieveIcons();
  }

  Widget _gridViewBuilder() {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        //横轴子元素数量
        crossAxisCount: 3,
        //子元素高宽比比例
        childAspectRatio: 2.0,
        // //横轴子元素间距
        // mainAxisSpacing: 0.0,
        // //纵轴子元素间距
        // crossAxisSpacing: 10,
      ),
      itemCount: _icons.length,
      itemBuilder: (context, index) {
        print("index: $index");
        //如果显示到最后一个并且Icon总数小于200时继续获取数据
        if (index == _icons.length - 1 && _icons.length < 200) {
          _retrieveIcons();
        }
        return Icon(_icons[index]);
      },
    );
  }

  Widget _gridViewCount() {
    //SliverGridDelegateWithFixedCrossAxisCount
    //可以快速创建横轴子元素为固定数量的 GridView
    return GridView.count(
      crossAxisCount: 3,
      childAspectRatio: 1.0,
      children: const [
        Icon(Icons.ac_unit),
        Icon(Icons.airport_shuttle),
        Icon(Icons.all_inclusive),
        Icon(Icons.beach_access),
        Icon(Icons.cake),
        Icon(Icons.free_breakfast),
      ],
    );
  }

  Widget _gridViewExtent() {
    //SliverGridDelegateWithMaxCrossAxisExtent
    //可以快速创建横轴子元素为固定长度的 GridView
    return GridView.extent(
      maxCrossAxisExtent: 160.0,
      childAspectRatio: 2.0,
      children: const [
        Icon(Icons.ac_unit),
        Icon(Icons.airport_shuttle),
        Icon(Icons.all_inclusive),
        Icon(Icons.beach_access),
        Icon(Icons.cake),
        Icon(Icons.free_breakfast),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GridView 组件'),
      ),
      body: _gridViewBuilder(),
      //body: _gridViewCount(),
      //body: _gridViewExtent(),
    );
  }

  //模拟异步获取数据
  void _retrieveIcons() {
    Future.delayed(const 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,
        ]);
      });
    });
  }
}