nine_grid_view

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

NineGridView 是一個 Flutter 套件，提供靈活的九宮格佈局來顯示圖片，靈感來自微博和微信。它支援靜態圖片網格以及使用 DragSortView 的可拖曳排序，實現互動式照片排列。此套件針對 Android、iOS、Web、macOS、Windows 和 Linux 等多個平台進行優化。它提供順暢的渲染與可自訂的網格行為，非常適合用於社群媒體風格的圖片相簿或內容 feeds。

適用情境

社交媒體照片網格
影像集合顯示
拖曳圖片排序
內容提要佈局
照片簿介面
互動式圖像畫廊

主要特色

九宮格圖片佈局
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;
  },
);