nine_grid_view

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

NineGridView는 웨이보와 위챗을 영감으로 삼아 이미지를 표시하기 위한 유연한 9개 그리드 레이아웃을 제공하는 Flutter 패키지입니다. 정적 이미지 그리드와 DragSortView를 사용한 드래그 가능한 정렬을 지원하여 상호작용식 사진 배열이 가능합니다. 이 패키지는 Android, iOS, Web, macOS, Windows, Linux 등 여러 플랫폼에 최적화되어 있으며 부드러운 렌더링과 사용자 정의 가능한 그리드 동작을 제공하여 소셜 미디어 스타일의 이미지 갤러리나 콘텐츠 피드에 적합합니다.

사용 사례

소셜 미디어 사진 그리드
이미지 컬렉션 표시
드래그 앤 드롭 이미지 정렬
콘텐츠 피드 레이아웃
사진 앨범 인터페이스
인터랙티브 이미지 갤러리

주요 기능

나인그리드 이미지 레이아웃
재정렬용 DragSortView
크로스 플랫폼 지원
사용자 정의 가능한 그리드 간격
부드러운 이미지 로딩
반응형 디자인

적합한 대상

소셜 앱을 개발하는 개발자
이미지 중심의 인터페이스를 만드는 UI 디자이너
정렬 가능한 이미지 컬렉션을 필요로 하는 앱
다중 플랫폼 대상 프로젝트
플러터를 전체 스택 개발에 사용하는 팀

고려 사항

올바른 이미지 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;
  },
);