Flutter自适应网格布局插件flexible_grid_view_plus的使用

Flutter自适应网格布局插件flexible_grid_view_plus的使用

关于Flexible grid view

我创建了Flexible Grid View，以便在Flutter中更方便地创建网格视图。

使用Flexible Grid View时，你无需担心子部件的高度问题，因为它们可以有任意高度。这比默认的GridView更为方便，后者需要你设置子部件的aspectRatio或固定高度。

安装

在你的pubspec.yaml文件中添加flexible_grid_view作为依赖项：

dependencies:
  flexible_grid_view_plus: ^0.0.1

然后运行flutter pub get来安装包。

使用

要使用FlexibleGridViewPlus，导入flexible_grid_view_plus.dart并使用FlexibleGridViewPlus小部件，如下所示：

import 'package:flexible_grid_view_plus/flexible_grid_view_plus.dart';

FlexibleGridViewPlus(
  padding: const EdgeInsets.all(16),
  mainAxisSpacing: 16,
  crossAxisSpacing: 16,
  children: demoData.map((e) => CatalogCard(catalogItem: e)).toList(),
);

这里我们创建了一个带有20个随机大小容器的FlexibleGridViewPlus，每行显示三个元素，并且列与列之间和行与行之间都有16像素的间距。

API

FlexibleGridViewPlus小部件具有以下参数：

  • children（必需）：要显示的小部件列表。
  • axisCount：每行显示的元素数量，作为GridLayoutEnum值。默认为GridLayoutEnum.threeElementsInRow。
  • crossAxisSpacing：网格中小部件列之间的间距。默认为16。
  • mainAxisSpacing：网格中小部件行之间的间距。默认为16。
  • shrinkWrap：是否允许网格收缩包裹其内容。默认为false。
  • physics：滚动小部件的物理特性。默认为null。
  • controller：滚动小部件的控制器。默认为null。
  • reverse：是否以相反顺序显示网格。默认为false。
  • padding：应用于滚动小部件的填充。默认为null。

布局

GridLayoutEnum是一个枚举类，表示FlexibleGridViewPlus中每行显示的元素数量。它有以下值：

  • GridLayoutEnum.twoElementsInRow：每行两个元素。
  • GridLayoutEnum.threeElementsInRow：每行三个元素。
  • GridLayoutEnum.fourElementsInRow：每行四个元素。

示例代码

以下是完整的示例代码：

import 'package:flexible_grid_view_example/demo_data.dart';
import 'package:flutter/material.dart';
import 'package:flexible_grid_view_plus/flexible_grid_view_plus.dart';

import 'catalog_card.dart';

void main() => runApp(const RootWidget());

class RootWidget extends StatelessWidget {
  const RootWidget({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flexible grid view',
      theme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.light,
        colorSchemeSeed: Colors.greenAccent,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flexible grid view example'),
        ),
        body: FlexibleGridViewPlus(
          padding: const EdgeInsets.all(16),
          mainAxisSpacing: 16,
          crossAxisSpacing: 16,
          children: demoData.map((e) => CatalogCard(catalogItem: e)).toList(),
        ),
      ),
    );
  }
}

更多关于Flutter自适应网格布局插件flexible_grid_view_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自适应网格布局插件flexible_grid_view_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用flexible_grid_view_plus插件来实现自适应网格布局的示例代码。这个插件允许你创建一个响应式的网格视图，根据屏幕尺寸和方向自动调整网格项的大小和数量。

首先，你需要在你的pubspec.yaml文件中添加flexible_grid_view_plus依赖：

dependencies:
  flutter:
    sdk: flutter
  flexible_grid_view_plus: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来是一个完整的示例代码，展示如何使用flexible_grid_view_plus：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flexible GridView Plus Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<String> items = List<String>.generate(50, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flexible GridView Plus Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: FlexibleGridViewPlus(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: crossAxisCount(context),
            crossAxisSpacing: 4.0,
            mainAxisSpacing: 4.0,
          ),
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Card(
              color: Colors.primary.withOpacity(0.7),
              child: Center(
                child: Text(items[index]),
              ),
            );
          },
        ),
      ),
    );
  }

  int crossAxisCount(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    if (screenWidth > 800) {
      return 4; // 大屏幕设备，如桌面或平板，显示4列
    } else if (screenWidth > 600) {
      return 3; // 中等屏幕设备，如横向平板，显示3列
    } else if (screenWidth > 400) {
      return 2; // 中小屏幕设备，如纵向平板或大屏手机，显示2列
    } else {
      return 1; // 小屏幕设备，如普通手机，显示1列
    }
  }
}

代码解释：

  1. 依赖添加：

    • 在pubspec.yaml文件中添加flexible_grid_view_plus依赖。

  2. 主应用：

    • MyApp是应用的根组件，它包含了一个MaterialApp，其中设置了主题和主页。

  3. 主页：

    • MyHomePage是一个无状态组件，它包含了一个Scaffold，里面有一个AppBar和一个带有内边距的Padding组件。
    • Padding组件内是一个FlexibleGridViewPlus，它使用SliverGridDelegateWithFixedCrossAxisCount来定义网格布局。
    • crossAxisCount方法根据屏幕宽度返回不同的列数，实现响应式布局。

  4. 网格项：

    • itemBuilder方法定义了每个网格项的外观，这里使用了一个带有文本的Card组件。

通过这种方式，你可以创建一个自适应的网格布局，根据设备的屏幕尺寸和方向自动调整网格项的大小和数量。希望这个示例代码对你有帮助！

回到顶部