Flutter动态高度网格视图插件dynamic_height_grid_view的使用

描述

dynamic_height_grid_view 是一个用于Flutter应用的插件，允许创建具有动态高度的GridView。与传统的GridView不同，您无需使用aspectRatio，从而可以更灵活地定义每个项目的高度。

pub package License: MIT

使用方法

基本用法

import 'package:dynamic_height_grid_view/dynamic_height_grid_view.dart';
import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DynamicHeightGridView(
        itemCount: 120, // 子项的数量
        crossAxisCount: 3, // 每行的子项数量
        crossAxisSpacing: 10, // 子项之间的横向间距
        mainAxisSpacing: 10, // 子项之间的纵向间距
        builder: (ctx, index) {
          // 自定义返回的widget逻辑
          return Container(
            height: getHeight(index), // 获取特定index的高度
            color: getColor(index),   // 获取特定index的颜色
          );
        }
      ),
    );
  }

  double getHeight(int index) {
    // 返回对应索引的容器高度
    // 这里仅作为示例，实际中可能根据数据源来确定
    final heights = [100, 120, 140, 160, 180, 200];
    return heights[index % heights.length].toDouble();
  }

  Color getColor(int index) {
    // 返回对应索引的容器颜色
    // 这里仅作为示例，实际中可能根据数据源来确定
    final colors = [
      Colors.red,
      Colors.redAccent,
      Colors.deepOrange,
      Colors.orange,
      Colors.amberAccent,
      Colors.yellow,
      Colors.lightGreenAccent,
      Colors.lightGreen,
      Colors.green,
      Colors.greenAccent,
      Colors.lightBlueAccent,
      Colors.blue,
    ];
    return colors[index % colors.length];
  }
}

在CustomScrollView中使用

如果您想在一个自定义滚动视图（如带有AppBar等组件的页面）中使用动态高度的GridView，可以使用SliverDynamicHeightGridView：

class SliverMyHomePage extends StatelessWidget {
  const SliverMyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverDynamicHeightGridView(
            itemCount: 16, // 子项的数量
            crossAxisCount: 3, // 每行的子项数量
            builder: (ctx, index) {
              return Container(
                height: getHeight(index),
                color: getColor(index),
              );
            },
          )
        ],
      ),
    );
  }

  double getHeight(int index) {
    final heights = [100, 120, 140, 160, 180, 200];
    return heights[index % heights.length].toDouble();
  }

  Color getColor(int index) {
    final colors = [
      Colors.red,
      Colors.redAccent,
      Colors.deepOrange,
      Colors.orange,
      Colors.amberAccent,
      Colors.yellow,
      Colors.lightGreenAccent,
      Colors.lightGreen,
      Colors.green,
      Colors.greenAccent,
      Colors.lightBlueAccent,
      Colors.blue,
    ];
    return colors[index % colors.length];
  }
}

以上代码展示了如何在Flutter项目中集成和使用dynamic_height_grid_view插件，包括基本的GridView以及在CustomScrollView中的实现方式。通过调整itemCount、crossAxisCount、crossAxisSpacing和mainAxisSpacing参数，您可以轻松定制网格布局以满足您的需求。此外，通过自定义builder回调函数，您可以为每个网格项指定不同的高度和其他属性。