Pub Version
Codecov
GitHub branch checks state

一个GridView,用户可以通过拖动来交互式地重新排序其项目。

与提供的ReorderableListView相比,它
可以重新排序不同大小的小部件,无论是否有动画。

An animated image of the iOS ReordableGridView UI

功能

在您的Flutter应用中使用此包来

  • 启用具有不同小部件的重新排序逻辑
  • 简化的小部件
  • 适用于所有在内部渲染的小部件
  • 重新排序项目时有动画

入门

只需将ReordableGridView添加到您首选的小部件中,并指定一个子列表。

用法

import 'package:flutter_reorderable_grid_view/reorderable_grid_view.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: ReorderableGridView(
            children: List.generate(
              20,
                  (index) => Container(
                color: Colors.blue,
                height: 100,
                width: 100,
                child: Text(
                  'test $index',
                  style: const TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

附加信息

ReordableGridView

参数 描述 默认值
children 显示在Wrap内构建的所有给定子项。
spacing 子项之间的垂直间距。 8
runSpacing 子项之间的水平间距。 8
enableAnimation 启用拖放后更改子项位置时的动画。
enableLongPress 决定用户是否需要长按来移动项目。
longPressDelay 启用长按时指定移动项目的延迟。 500毫秒
onUpdate 将项目拖到新位置后,将调用此函数。
该函数包含一个按添加顺序排列的所有项目列表。列表中的数字表示项目当前所在的位置。

未来

如果您有功能请求或发现了一些问题,请随时在GitHub项目上提交您的问题。

感谢您使用此包。

GitHub

查看 Github