Flutter可重排交错滚动视图插件reorderable_staggered_scroll_view的使用

描述

reorderable_staggered_scroll_view 是一个Flutter包，用于创建可重排序和可拖拽的交错网格和列表视图。此包提供了一种平滑且直观的方式在网格和列表布局中重新排列项目，非常适合创建交互性和用户友好型的应用程序。

特性

• 使用简单的拖放手势即可轻松重新排序项目。
• 支持交错网格和列表布局。
• 可配置的拖放行为。
• 旨在为用户提供无缝体验。

开始使用

要在您的项目中使用这个包，您需要将其添加到 pubspec.yaml 文件中，并替换 ^latest_version 为实际想要使用的版本号：

dependencies:
  reorderable_staggered_scroll_view: ^latest_version

然后，在Dart代码中导入该包：

import 'package:reorderable_staggered_scroll_view/reorderable_staggered_scroll_view.dart';

示例代码

以下是一个完整的示例应用程序，展示了如何使用 reorderable_staggered_scroll_view 创建一个可以切换不同类型的页面（列表、固定数量的网格、自定义宽度的网格）的应用程序：

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:reorderable_staggered_scroll_view/reorderable_staggered_scroll_view.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Builder(builder: (context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('Example'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                for (final type in GridType.values)
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: ElevatedButton(
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => HomePage(type: type),
                          ),
                        );
                      },
                      child: Padding(
                        padding: const EdgeInsets.all(16),
                        child: Text(switch (type) {
                          GridType.list => "List",
                          GridType.count => "Grid Count",
                          GridType.extent => "Grid Extent",
                        }),
                      ),
                    ),
                  ),
              ],
            ),
          ),
        );
      }),
    );
  }
}

enum GridType {
  list,
  count,
  extent,
}

class HomePage extends StatefulWidget {
  final GridType type;

  const HomePage({Key? key, required this.type}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _dragEnabled = true;

  @override
  Widget build(BuildContext context) {
    final nonDraggable = ReorderableStaggeredScrollViewGridCountItem(
      key: ValueKey(10.toString()),
      mainAxisCellCount: 1,
      crossAxisCellCount: Random().nextInt(2) + 1,
      widget: const Card(
        child: Padding(
          padding: EdgeInsets.all(12),
          child: Center(child: Text('Non Draggable')),
        ),
      ),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(switch (widget.type) {
          GridType.list => "List Example",
          GridType.count => "Grid Count Example",
          GridType.extent => "Grid Extent Example",
        }),
        actions: [
          IconButton(
            onPressed: () {
              setState(() {
                _dragEnabled = !_dragEnabled;
              });
            },
            icon: Icon(
              _dragEnabled ? Icons.pause : Icons.play_arrow,
            ),
          )
        ],
      ),
      body: widget.type == GridType.list
          ? ReorderableStaggeredScrollView.list(
              enable: _dragEnabled,
              padding: const EdgeInsets.all(16),
              physics: const BouncingScrollPhysics(),
              scrollDirection: Axis.vertical,
              axis: Axis.vertical,
              shrinkWrap: true,
              isLongPressDraggable: false,
              onDragEnd: (details, item) {
                debugPrint('onDragEnd: $details ${item.key}');
              },
              isNotDragList: [nonDraggable],
              children: [
                ...List.generate(
                  5,
                  (index) => ReorderableStaggeredScrollViewListItem(
                    key: ValueKey(index.toString()),
                    widget: Card(
                      child: Padding(
                        padding: const EdgeInsets.all(12),
                        child: Center(child: Text('Item $index')),
                      ),
                    ),
                  ),
                ),
                nonDraggable,
                ...List.generate(
                  5,
                  (index) => ReorderableStaggeredScrollViewListItem(
                    key: ValueKey('${index + 5}'),
                    widget: Card(
                      child: Padding(
                        padding: const EdgeInsets.all(12),
                        child: Center(child: Text('Item ${index + 5}')),
                      ),
                    ),
                  ),
                )
              ])
          : ReorderableStaggeredScrollView.grid(
              enable: _dragEnabled,
              padding: const EdgeInsets.all(16),
              scrollDirection: Axis.vertical,
              physics: const BouncingScrollPhysics(),
              crossAxisCount: 4,
              isLongPressDraggable: false,
              onAccept: (item1, item2, value) {
                print('item1 $item1 item2 $item2 value $value');
              },
              onDragEnd: (details, item) {
                print('onDragEnd: $details ${item.key}');
              },
              onMove: (item, item2, value) {
                print('onMove: item $item item2 $item2 value $value');
              },
              onDragUpdate: (details, item) {
                print('onDragUpdate: details $details item $item');
              },
              isNotDragList: [nonDraggable],
              children: [
                ...List.generate(
                  5,
                  (index) => widget.type == GridType.count
                      ? ReorderableStaggeredScrollViewGridCountItem(
                          key: ValueKey(index.toString()),
                          mainAxisCellCount: 1,
                          crossAxisCellCount: Random().nextInt(2) + 1,
                          widget: Card(
                              child: Center(child: Text('Item $index'))),
                        )
                      : ReorderableStaggeredScrollViewGridExtentItem(
                          key: ValueKey(index.toString()),
                          mainAxisExtent: Random().nextInt(200) + 100,
                          crossAxisCellCount: Random().nextInt(2) + 1,
                          widget: Card(
                              child: Center(child: Text('Item $index'))),
                        ),
                ),
                nonDraggable,
                ...List.generate(
                  5,
                  (index) => widget.type == GridType.count
                      ? ReorderableStaggeredScrollViewGridCountItem(
                          key: ValueKey((index + 5).toString()),
                          mainAxisCellCount: 1,
                          crossAxisCellCount: Random().nextInt(2) + 1,
                          widget: Card(
                              child: Center(child: Text('Item ${index + 5}'))),
                        )
                      : ReorderableStaggeredScrollViewGridExtentItem(
                          key: ValueKey((index + 5).toString()),
                          mainAxisExtent: Random().nextInt(200) + 100,
                          crossAxisCellCount: Random().nextInt(2) + 1,
                          widget: Card(
                              child: Center(child: Text('Item ${index + 5}'))),
                        ),
                )
              ]),
    );
  }
}

上述代码创建了一个包含三个按钮的主界面，每个按钮点击后都会导航到一个新页面，展示不同类型的视图（列表、固定数量的网格、自定义宽度的网格）。这些页面中的元素支持拖动以重新排序，并且可以通过应用栏上的图标启用或禁用拖动功能。此外，还展示了如何创建不可拖动的项。