사용자가 드래그 앤 드롭을 통해 그리드 항목을 동적으로 재정렬할 수 있도록 하는 완전히 기능하는 재정렬 가능한 그리드를 제공하는 플러터 패키지입니다. 플러터의 내장된 ReorderableListView에서 영감을 받았으며, 안드로이드, iOS, 웹, 맥OS, 윈도우, 리눅스 등 주요 모든 플랫폼을 지원합니다. 부드러운 애니메이션을 유지하고 터치 제스처를 효율적으로 처리하여 대시보드, 사진 갤러리, 작업 보드와 같은 사용자 정의 레이아웃에 이상적입니다. 기존 플러터 앱과 원활하게 통합되며, 사용자 정의를 위한 간단한 API를 제공합니다.
사용 사례
사용자 정의 가능한 대시보드 레이아웃
사진 또는 미디어 갤러리 재정렬
작업 또는 카드 기반 인터페이스 재정렬
사용자 정의 위젯 배열
인터랙티브한 그리드 기반 데이터 관리
주요 기능
드래그 앤 드롭 재정렬
크로스 플랫폼 호환성
부드러운 애니메이션 전환
유연한 항목 사용자 정의
내장된 제스처 처리
적합한 대상
인터랙티브 그리드 인터페이스를 구축하는 개발자
사용자 중심의 레이아웃 사용자 정의가 필요한 앱
동적 콘텐츠 구성이 있는 프로젝트
직관적인 UI 상호작용을 원하는 디자이너
다중 플랫폼을 대상으로 하는 Flutter 애플리케이션
고려 사항
상태 관리에 주의 깊게 대응해야 합니다
대규모 데이터 세트에서 성능에 영향을 미칠 수 있습니다
터치 타겟에는 적절한 패딩과 간격이 필요합니다
제한된 내장 스타일 옵션
매우 높은 항목 수에 최적화되지 않음
원본 README
연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.
:white_square_button: Reorderable Grid
A full reorderable grid implemention similar to Flutters Reorderable_List. with full ReorderableGridView, ReorderableGrid and SliverReorderableGrid implementations
:hammer: How it works
ReorderableGridView is a drop in replacement for the existing GridView and adds an onReorder callback that provides the original and new index of the reordered item.
/// create a new list of datafinal items = List<int>.generate(40, (index) => index);
/// when the reorder completes remove the list entry from its old position/// and insert it at its new indexvoid_onReorder(int oldIndex, int newIndex) {
setState(() {
final item = items.removeAt(oldIndex);
items.insert(newIndex, item);
});
}
@overrideWidgetbuild(BuildContext context) {
returnMaterialApp(
home: Scaffold(
body: ReorderableGridView.extent(
maxCrossAxisExtent: 250,
onReorder: _onReorder,
childAspectRatio: 1,
children: items.map((item) {
/// map every list entry to a widget and assure every child has a /// unique keyreturnCard(
key: ValueKey(item),
child: Center(
child: Text(item.toString()),
),
);
}).toList(),
),
),
);
}
ReorderableGrid provides all the constructors and parameters the normal GridView has. The package also includes:
ReorderableGridView, which is a prebuild Material-ish implementation of the grid.
ReorderableGrid, A barebones widget that allows you to customize the grid however you want
SliverReorderableGrid, a reorderable grid sliver for custom scroll implementations
Documentation
You can find all features and fuctionality documented here
:wave: Get Involved
If this package is useful to you please :thumbsup: on pub.dev and :star: on github. If you have any Issues, recommendations or pull requests I'd love to see them!