Flutter 图片布局后处理插件 image_post_layout 的使用

Flutter Image Post Layout

一个可定制的 Flutter 小部件，用于以多种网格布局展示图片集合。此插件提供了一种优雅的方式在不同的排列方式下展示多张图片，非常适合用于画廊、社交媒体信息流或任何图片丰富的界面。

特性

• 多种布局选项，用于展示图片集合。
• 自动显示“更多”指示器，用于额外的图片。
• 响应式设计，适应屏幕宽度。
• 可通过主题集成自定义外观。
• 最少需要 5 张图片以获得最佳显示效果。

布局类型

经典布局

• 上排：两张等宽图片。
• 下排：三张等宽图片。
• 高度为宽度的 80%。
• 如果有超过 5 张图片，则最后一张图片会显示“+X”计数器。

列表布局

• 四列垂直排列，高度交替。
• 奇数列偏移，呈现错落感。
• 高度为宽度的 80%。
• 如果有超过 4 张图片，则最后一列会显示“+X”计数器。

横幅布局

• 顶部大横幅图片（占高度的 3/6）。
• 中间文字区域（占高度的 1/6）。
• 底部四张小图片（占高度的 2/6）。
• 如果有超过 5 张图片，则最后一张小图片会显示“+X”计数器。

边框布局

• 左侧两张大图片（占宽度的 60%）。
• 右侧三张小图片（占宽度的 40%）。
• 图片为正方形比例。
• 如果有超过 5 张图片，则最后一张右侧图片会显示“+X”计数器。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  image_post_layout: ^1.0.0

然后运行 flutter pub get。

使用

以下是一个完整的示例代码，展示了如何使用 ImagePost 插件实现不同布局类型的图片展示。

import 'dart:developer';

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({super.key});

  // 图片列表
  final List<String> imageUrls = [
    'https://fastly.picsum.photos/id/156/2177/3264.jpg?hmac=hjKWxNR5fYw1fbGYXknGDH6eRORZ_AlTeQBvyT2q_Cs',
    'https://fastly.picsum.photos/id/157/5000/3914.jpg?hmac=A23PziOOpi_DIdiPRI30m9_1A8keOtMF3a6Vb-D7dRA',
    'https://fastly.picsum.photos/id/158/4836/3224.jpg?hmac=Gu_3j3HxZgR74iw1sV0wcwlnSZSeCi7zDWLcjblOp_c',
    'https://fastly.picsum.photos/id/159/5000/2460.jpg?hmac=h12oeFVhY4-vOrALaICJ4k4dqemWn1lvaMN8yvnIU1w',
    'https://fastly.picsum.photos/id/160/3200/2119.jpg?hmac=cz68HnnDt3XttIwIFu5ymcvkCp-YbkEBAM-Zgq-4DHE',
    'https://fastly.picsum.photos/id/161/4240/2832.jpg?hmac=LxG8oJEn91SpyJrBtLXd85CZfw9KBcI10x5c5M4Y_NQ',
    'https://fastly.picsum.photos/id/162/1500/998.jpg?hmac=j-Xr1aKHzCJQigPBLF0nKTudXM2w9u1-Smxlam0YOt8'
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text('Image Layout Grid'),
      ),
      body: ListView(
        children: [
          // 经典布局
          ImagePost(
            type: ImagePostType.classic,
            images: imageUrls,
            bannerCaption: 'Caption for ImagePostType Banner',
            onPressedItem: (int index) {
              log('pressed $index');
            },
            onPressedMore: () {
              log('pressed more');
            },
          ),

          // 列表布局
          ImagePost(
            type: ImagePostType.columns,
            images: imageUrls,
            onPressedItem: (int index) {
              log('pressed $index');
            },
            onPressedMore: () {
              log('pressed more');
            },
          ),

          // 横幅布局
          ImagePost(
            type: ImagePostType.banner,
            images: imageUrls,
            bannerCaption: 'Caption for ImagePostType Banner',
            onPressedItem: (int index) {
              log('pressed $index');
            },
            onPressedMore: () {
              log('pressed more');
            },
          ),

          // 边框布局
          ImagePost(
            type: ImagePostType.frame,
            images: imageUrls,
            onPressedItem: (int index) {
              log('pressed $index');
            },
            onPressedMore: () {
              log('pressed more');
            },
          ),
        ],
      ),
    );
  }
}