nine_grid_view

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

NineGridView ist ein Flutter-Paket, das eine flexible Neun-Raster-Anordnung zum Anzeigen von Bildern bereitstellt, inspiriert durch Weibo und WeChat. Es unterstützt sowohl statische Bildgitter als auch verschiebbare Sortierung mit DragSortView, was interaktive Fotoanordnungen ermöglicht. Das Paket ist für mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux optimiert. Es bietet reibungslose Darstellung und anpassbare Gitterverhalten, wodurch es ideal für soziale Medien-artige Bildgalerien oder Inhaltsfeeds ist.

Anwendungsfälle

Soziale-Medien-Fotogitter
Bildsammlung anzeigen
Bildsortierung per Drag-and-Drop
Inhaltsfeed-Layouts
Fotoalbum-Oberflächen
Interaktive Bildgalerien

Hauptmerkmale

Neun-Raster-Bildlayout
DragSortView zum Umordnen
Plattformübergreifende Unterstützung
Anpassbarer Rasterabstand
Glatte Bildladung
Reaktives Design

Geeignet für

Entwickler, die soziale Apps erstellen
UI-Designer, die bildintensive Schnittstellen erstellen
Apps, die sortierbare Bildsammlungen erfordern
Projekte für mehrere Plattformen
Teams, die Flutter für Full-Stack-Entwicklung verwenden

Hinweise

Erforderliche ordnungsgemäße Behandlung der Bild-URL
Könnte eine Leistungsoptimierung für große Bilddatenmengen erfordern
Beschränkt auf Bildinhalte in der Basisversion
Benutzerdefinierte Stile erfordern zusätzlichen Code
Nicht geeignet für nicht-bildbasierte Daten

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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;
  },
);