Flutter看板视图插件flutter_boardview_kanban的使用

简介

flutter_boardview 是一个强大的自定义小部件，能够创建类似 Trello 或 Jira 接口的可拖动看板。这种灵活的看板视图允许用户通过直观的拖放功能轻松重新排列和管理项目。通过此组件，您可以创建、重新排列和自定义列，从而在您的应用程序中提供动态且灵活的仪表盘体验。

源项目

• 源代码

安装

只需将 flutter_boardview 添加到 pubspec.yaml 文件中：

dependencies:
  flutter_boardview: ^x.y.z

然后运行 flutter pub get。

使用示例

要开始使用，可以查看 /example 文件夹中的示例。该包分为三个核心部分：

简单看板

无限滚动列

在示例中，我们使用了 https://pub.dev/packages/infinite_scroll_pagination 来实现无限滚动列表：

BoardView

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

// 创建一个 BoardViewController 实例
BoardViewController boardViewController = BoardViewController();

// 初始化一个空的 BoardList 列表
List<BoardList> _lists = List<BoardList>();

// 使用 BoardView 构建界面
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"),
    ),
  )
);

完整示例

以下是完整的示例代码，展示了如何使用 flutter_boardview 插件创建一个简单的看板应用。

// example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_boardview/flutter_boardview.dart'; // 导入必要的库

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter BoardView Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Tab> tabs = [
    Tab("Board", const ExampleBoard(), const Icon(Icons.table_chart)),
    Tab("Pagination (infinite scroll)", const PaginationScrollBoard(), const Icon(Icons.list_alt_outlined)),
  ];

  int _selectedIndex = 0;
  late final List<Widget> _widgetOptions = tabs.map((Tab tab) => tab.widget).toList();

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(tabs[_selectedIndex].label)),
      body: _widgetOptions.elementAt(_selectedIndex),
      bottomNavigationBar: BottomNavigationBar(
        items: tabs
            .map((Tab tab) => BottomNavigationBarItem(
                  icon: tab.icon,
                  label: tab.label,
                ))
            .toList(),
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

class Tab {
  final String label;
  final Widget widget;
  final Widget icon;

  Tab(this.label, this.widget, this.icon);
}