Flutter BoardView 的使用

这是一个可以创建可拖动的 BoardView 或者称为看板的自定义小部件。该视图可以通过拖放进行重新排序。

安装

只需将 boardview 添加到 pubspec.yaml 文件中。

dependencies:
  boardview: ^x.x.x

使用示例

要开始使用，可以查看 /example 文件夹内的代码。此包分为三个核心部分：

BoardView

BoardView 类接受一个 BoardList 列表。它还可以接受一个 BoardViewController，用于在 BoardView 中动画到特定位置。

BoardViewController boardViewController = new BoardViewController();

List<BoardList> _lists = [];

BoardView(
  lists: _lists,
  boardViewController: boardViewController,
);

BoardList

BoardList 包含几个回调方法，当其被拖动时会被调用。头部项是一个 Row 并期望一个列表。

BoardList(
  onStartDragList: (int listIndex) {
    // 当列表开始被拖动时调用
  },
  onTapList: (int listIndex) async {
    // 当列表被点击时调用
  },
  onDropList: (int listIndex, int oldListIndex) {       
    // 当列表被放下时调用
  },
  headerBackgroundColor: Color.fromARGB(255, 235, 236, 240),
  backgroundColor: Color.fromARGB(255, 235, 236, 240),
  header: [
    Expanded(
        child: Padding(
            padding: EdgeInsets.all(5),
            child: Text(
              "List Item",
              style: TextStyle(fontSize: 20),
            ))),
  ],
  items: items,
);

BoardItem

BoardItem 视图包含几个回调方法，当拖动时会被调用。长按项目字段小部件会开始拖动过程。

BoardItem(
  onStartDragItem: (int listIndex, int itemIndex, BoardItemState state) {
    // 当项目开始被拖动时调用
  },
  onDropItem: (int listIndex, int itemIndex, int oldListIndex,
      int oldItemIndex, BoardItemState state) {
    // 当项目被放下时调用
  },
  onTapItem: (int listIndex, int itemIndex, BoardItemState state) async {
    // 当项目被点击时调用
  },
  item: Card(
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text("Board Item"),
    ),
  )
);

完整示例代码

以下是一个完整的示例代码，展示了如何使用 BoardView、BoardList 和 BoardItem。

import 'package:boardview/board_item.dart';
import 'package:boardview/board_list.dart';
import 'package:boardview/boardview_controller.dart';
import 'package:flutter/material.dart';
import 'package:boardview/boardview.dart';

import 'BoardItemObject.dart';
import 'BoardListObject.dart';

class BoardViewExample extends StatelessWidget {

  List<BoardListObject> _listData = [
    BoardListObject(title: "List title 1"),
    BoardListObject(title: "List title 2"),
    BoardListObject(title: "List title 3")
  ];

  BoardViewController boardViewController = new BoardViewController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    List<BoardList> _lists = [];
    for (int i = 0; i < _listData.length; i++) {
      _lists.add(_createBoardList(_listData[i]) as BoardList);
    }
    return BoardView(
      lists: _lists,
      boardViewController: boardViewController,
    );
  }

  Widget buildBoardItem(BoardItemObject itemObject) {
    return BoardItem(
      onStartDragItem: (int? listIndex, int? itemIndex, BoardItemState? state) {
        // 当项目开始被拖动时调用
      },
      onDropItem: (int? listIndex, int? itemIndex, int? oldListIndex,
          int? oldItemIndex, BoardItemState? state) {
        // 更新本地项目数据
        var item = _listData[oldListIndex!].items![oldItemIndex!];
        _listData[oldListIndex].items!.removeAt(oldItemIndex!);
        _listData[listIndex!].items!.insert(itemIndex!, item);
      },
      onTapItem: (int? listIndex, int? itemIndex, BoardItemState? state) async {
        // 当项目被点击时调用
      },
      item: Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(itemObject.title!),
        ),
      )
    );
  }

  Widget _createBoardList(BoardListObject list) {
    List<BoardItem> items = [];
    for (int i = 0; i < list.items!.length; i++) {
      items.insert(i, buildBoardItem(list.items![i]) as BoardItem);
    }

    return BoardList(
      onStartDragList: (int? listIndex) {
        // 当列表开始被拖动时调用
      },
      onTapList: (int? listIndex) async {
        // 当列表被点击时调用
      },
      onDropList: (int? listIndex, int? oldListIndex) {
        // 更新本地列表数据
        var list = _listData[oldListIndex!];
        _listData.removeAt(oldListIndex!);
        _listData.insert(listIndex!, list);
      },
      headerBackgroundColor: Color.fromARGB(255, 235, 236, 240),
      backgroundColor: Color.fromARGB(255, 235, 236, 240),
      header: [
        Expanded(
            child: Padding(
                padding: EdgeInsets.all(5),
                child: Text(
                  list.title!,
                  style: TextStyle(fontSize: 20),
                ))),
      ],
      items: items,
    );
  }
}