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

发布于 1周前 作者 songsunli 来自 Flutter

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

FittedGridView

FittedGridView 是一个可以将内容适应到父级边界的网格视图。

开始使用

在你的 pubspec.yaml 文件中添加 fitted_gridview 插件：

dependencies:
  fitted_gridview: ^x.y.z

然后运行：

flutter pub get

特性

  • maxItemDisplay: 定义最多显示多少个项。
  • itemCount: 定义项目总数。
  • itemBuilder: 定义每个项目的构建方式。
  • remainingItemsOverlay: 定义在最后一个显示项上显示剩余项数量的覆盖组件。
  • textDirection: 定义项目的排列方向。

使用方法

以下是一个简单的示例，展示如何使用 FittedGridView：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Fitted GridView',
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
      child: ListView.separated(
        padding: const EdgeInsets.all(8),
        separatorBuilder: (context, index) => const SizedBox(height: 14,),
        itemCount: 8,
        itemBuilder: (context, index) {
          return Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
                border: Border.all(color: Colors.black)
            ),
            child: FittedGridView(
              maxItemDisplay: 4,
              itemCount: index + 1,
              itemBuilder: (context, index) {
                // 假设我们有一个图片列表
                return Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Image.network(
                    images[index],
                    fit: BoxFit.cover,
                  ),
                );
              },
              remainingItemsOverlay: (remaining) {
                return Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Container(
                    color: Colors.grey.withOpacity(0.7),
                    alignment: Alignment.center,
                    child: Text("+$remaining", style: const TextStyle(color: Colors.white)),
                  ),
                );
              },
            ),
          );
        },
      ),
    ));
  }
}

// 图片列表
final List<String> images = [
  "https://cdn.pixabay.com/photo/2018/01/20/22/53/war-3095526_1280.png",
  "https://randomwordgenerator.com/img/picture-generator/57e1d1434954aa14f1dc8460962e33791c3ad6e04e50744172297ed29348c6_640.jpg",
  "https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://randomwordgenerator.com/img/picture-generator/54e7d043435ba914f1dc8460962e33791c3ad6e04e507441722872d5934dc2_640.jpg",
  "https://cdn.pixabay.com/photo/2018/01/20/22/53/war-3095526_1280.png",
  "https://randomwordgenerator.com/img/picture-generator/57e1d1434954aa14f1dc8460962e33791c3ad6e04e50744172297ed29348c6_640.jpg",
  "https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://randomwordgenerator.com/img/picture-generator/54e7d043435ba914f1dc8460962e33791c3ad6e04e507441722872d5934dc2_640.jpg",
];

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

1 回复

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


当然，以下是如何在Flutter中使用fitted_gridview插件来实现自适应网格布局的代码示例。fitted_gridview是一个强大的插件，用于在Flutter应用中创建响应式网格视图。

首先，确保在你的pubspec.yaml文件中添加fitted_gridview依赖：

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

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

接下来是一个完整的示例，展示如何在Flutter中使用fitted_gridview：

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

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

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

class MyHomePage extends StatelessWidget {
  final List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
    // 添加更多图片URL
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FittedGridView Demo'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, // 你可以根据需要调整列数
          crossAxisSpacing: 4.0,
          mainAxisSpacing: 4.0,
        ),
        itemCount: imageUrls.length,
        itemBuilder: (context, index) {
          return FittedGridViewItem(
            child: CachedNetworkImage(
              imageUrl: imageUrls[index],
              placeholder: (context, url) => CircularProgressIndicator(),
              errorWidget: (context, url, error) => Icon(Icons.error),
              fit: BoxFit.cover,
            ),
          );
        },
      ),
    );
  }
}

// 使用CachedNetworkImage来加载网络图片，避免直接加载时可能的问题
// 你需要添加 cached_network_image 依赖到你的pubspec.yaml文件中
// dependencies:
//   cached_network_image: ^x.y.z  # 替换为最新版本号

请注意，在上面的代码中，我使用了CachedNetworkImage来加载网络图片，这是因为fitted_gridview本身并不包含图片加载功能。你需要使用其他图片加载库（如cached_network_image）来加载网络图片。

FittedGridViewItem是fitted_gridview提供的一个组件，用于包裹每个网格项，使它们能够自适应网格布局。

确保你安装了cached_network_image库，并替换了x.y.z为实际的版本号。

这样，你就可以在Flutter中实现一个自适应的网格布局了。希望这个示例对你有帮助！

回到顶部