nine_grid_view

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

NineGridView 是一个 Flutter 包，提供灵活的九宫格布局以显示图片，灵感来自微博和微信。它支持静态图片网格以及使用 DragSortView 的可拖拽排序，实现交互式照片排列。该包针对 Android、iOS、Web、macOS、Windows 和 Linux 等多个平台进行了优化。它提供流畅的渲染效果和可自定义的网格行为，非常适合用于社交媒体风格的图片画廊或内容流。

适合场景

社交媒体照片网格
图像集合显示
拖拽图片排序
内容提要布局
照片簿界面
交互式图像画廊

主要特点

九宫格图片布局
DragSortView 用于重新排序
跨平台支持
可自定义的网格间距
平滑的图像加载
响应式设计

适合对象

开发社交应用的开发者
UI设计师创建图像密集型界面
需要可排序图像集合的应用程序
针对多个平台的项目
使用 Flutter 进行全栈开发的团队

使用建议

需要正确处理图像URL
可能需要对大型图像集进行性能调优
基础版本仅限图像内容
自定义样式需要额外的代码
不适用于非图像数据

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Language: English | 中文简体

NineGridView

Similar to Weibo dynamics, WeChat circle of friends, nine grid view controls to display pictures. Support single big picture preview.
It also supports WeChat group , DingTalk group, QQ group avatar effects.

DragSortView

Similar to Weibo/WeChat release dynamic picture selection nine grid view. Support press to enlarge effect, drag and drop sorting, drag and drop to a specified location to delete.

Pub

dependencies:
  nine_grid_view: ^2.0.0

Example

import 'package:nine_grid_view/nine_grid_view.dart';

// bigImage param, It is recommended to use a medium-quality picture, because the original picture is too large and takes time to load.
NineGridView(
  margin: EdgeInsets.all(12),
  padding: EdgeInsets.all(5),
  space: 5,
  type: NineGridType.weChat,//NineGridType.weChat, NineGridType.weiBo
  itemCount: itemCount,
  itemBuilder: (BuildContext context, int index) {},
);

// group avatar.
// need width, height param.
NineGridView(
  width: 120,
  height: 120,
  padding: EdgeInsets.all(5),
  space: 5,
  type: NineGridType.qqGp, //NineGridType.weChatGp, NineGridType.dingTalkGp
  itemCount: itemCount,
  itemBuilder: (BuildContext context, int index) {},
);

// It is recommended to use a thumbnail picture，because the original picture is too large, it may cause repeated loading and cause flashing.
DragSortView(
  imageList,
  space: 5,
  margin: EdgeInsets.all(20),
  padding: EdgeInsets.all(0),
  itemBuilder: (BuildContext context, int index) {},
  initBuilder: (BuildContext context) {},
  onDragListener: (MotionEvent event, double itemWidth) {
    /// Judge to drag to the specified position to delete
    /// return true;
    if (event.globalY > 600) {
      return true;
    }
    return false;
  },
);