Flutter网格视图展示插件onyxsio_grid_view的使用

Flutter网格视图展示插件onyxsio_grid_view的使用

介绍

onyxsio_grid_view 是一个用于在Flutter应用中创建网格布局的插件。它可以帮助开发者轻松实现复杂的网格视图，支持不同高度的项目，并且可以根据内容自动调整容器的高度。

开始使用

要在你的Flutter项目中使用 onyxsio_grid_view，首先需要在项目的 pubspec.yaml 文件中添加依赖项：

dependencies:
  onyxsio_grid_view: <latest_version>

然后，在你的Dart文件中导入该插件：

import 'package:onyxsio_grid_view/onyxsio_grid_view.dart';

特性

• UI布局：该插件提供了一个阶梯式的网格布局，适用于浏览未裁剪的同行内容。容器的高度会根据小部件的大小自动调整。
• 自定义布局：你可以通过 staggeredTileBuilder 自定义每个项目的高度和宽度，支持固定高度、动态高度等多种布局方式。

示例代码

下面是一个完整的示例代码，展示了如何使用 onyxsio_grid_view 创建一个网格视图。这个示例将创建一个包含20个项目的网格，每个项目的高度可以不同，并且网格的列数为4。

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Onyxsio GridView builder',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Onyxsio GridView builder"),
      ),
      body: OnyxsioGridView.builder(
        // 设置内边距
        padding: const EdgeInsets.all(8),
        // 设置项目总数
        itemCount: 20,
        // 设置滚动效果为弹性滚动
        physics: const BouncingScrollPhysics(),
        // 定义每个项目的布局规则
        staggeredTileBuilder: (index) => const OnyxsioStaggeredTile.fit(2),
        // 设置每行的列数
        crossAxisCount: 4,
        // 设置主轴（垂直方向）间距
        mainAxisSpacing: 10,
        // 设置交叉轴（水平方向）间距
        crossAxisSpacing: 10,
        // 是否启用 shrinkWrap，减少渲染开销
        shrinkWrap: true,
        // 定义每个项目的构建方式
        itemBuilder: (context, index) => OnyxsioGridTile(
          index: index,
          // 设置每个项目的高度列表，可以根据索引动态调整高度
          heightList: const [300, 220, 220, 520],
          // 子组件，这里使用一个蓝色的Container作为示例
          child: Container(color: Colors.blue),
        ),
      ),
    );
  }
}

可选配置

你还可以通过 staggeredTileBuilder 来进一步自定义每个项目的布局。以下是两个常见的可选配置：

1. 按比例分配宽度和高度：

   staggeredTileBuilder: (index) =>
       OnyxsioStaggeredTile.count(2, index.isEven ? 2 : 1),
   

   这段代码表示，偶数索引的项目占据2列，奇数索引的项目占据1列。

2. 按固定高度分配：

   staggeredTileBuilder: (index) =>
       OnyxsioStaggeredTile.extent(2, index.isEven ? 200 : 50),