Flutter看板管理插件kanban_board的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter KanbanBoard

kanban_board 是一个可定制的看板插件，支持通过拖拽来重新排序项目和列表。

安装

只需在 pubspec.yaml 文件中添加 kanban_board 依赖即可：

dependencies:
  flutter:
    sdk: flutter
  kanban_board: ^x.x.x  # 替换为最新版本号

运行 flutter pub get 来安装依赖。

使用示例

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

  • KanbanBoard：主控件。
  • BoardListsData：定义每个列表的数据。
  • 回调函数：用于处理用户交互事件。

KanbanBoard

KanbanBoard 类接受一个 BoardListsData 的列表作为参数：

List<BoardListsData> _lists = List<BoardListsData>();

KanbanBoard(
   _lists,
);

它还可以接受其他一些参数，如背景颜色、卡片占位符颜色、列表占位符颜色等。

回调函数

KanbanBoard 提供了多个回调方法，用于处理拖拽事件：

KanbanBoard(
  onItemLongPress: (int cardIndex, int listIndex) { },
  onItemReorder: (int oldCardIndex, int newCardIndex, int oldListIndex, int newListIndex) { },
  onListLongPress: (int listIndex) { },
  onListReorder: (int oldListIndex, int newListIndex) {},
  onItemTap: (int cardIndex, int listIndex){},
  onListTap: (int listIndex){}
);

BoardListsData

BoardListsData 包含多个参数用于自定义列表：

BoardListsData(
  title: 'TITLE',
  width: 300,
  headerBackgroundColor: Color.fromARGB(255, 235, 236, 240),
  footerBackgroundColor: Color.fromARGB(255, 235, 236, 240),
  backgroundColor: Color.fromARGB(255, 235, 236, 240),
  header: Padding(
            padding: EdgeInsets.all(5),
            child: Text(
              "List Title",
              style: TextStyle(fontSize: 20),
            )),

  footer :Padding(
            padding: EdgeInsets.all(5),
            child: Text(
              "List Footer",
              style: TextStyle(fontSize: 20),
            )),   
  items: items,
);

完整示例代码

以下是一个完整的示例代码，展示如何使用 kanban_board 插件：

import 'package:flutter/material.dart';
import 'package:kanban_board/custom/board.dart';
import 'package:kanban_board/models/inputs.dart';

class Example extends StatefulWidget {
  const Example({super.key});

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter KanbanBoard Example'),
      ),
      body: KanbanBoard(
        List.generate(
          8,
          (index) => BoardListsData(
            title: 'List $index',
            items: List.generate(
              50,
              (index) => Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(4),
                  border: Border.all(
                    color: Colors.grey.shade200,
                  ),
                ),
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  "Item $index",
                  style: const TextStyle(
                    fontSize: 16,
                    color: Colors.black,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
          ),
        ),
        onItemLongPress: (cardIndex, listIndex) {
          print('Item long pressed at $cardIndex in list $listIndex');
        },
        onItemReorder: (oldCardIndex, newCardIndex, oldListIndex, newListIndex) {
          print('Item moved from $oldCardIndex to $newCardIndex, lists $oldListIndex to $newListIndex');
        },
        onListLongPress: (listIndex) {
          print('List long pressed at $listIndex');
        },
        onListReorder: (oldListIndex, newListIndex) {
          print('List moved from $oldListIndex to $newListIndex');
        },
        onItemTap: (cardIndex, listIndex) {
          print('Item tapped at $cardIndex in list $listIndex');
        },
        onListTap: (listIndex) {
          print('List tapped at $listIndex');
        },
        backgroundColor: Colors.white,
        displacementY: 124,
        displacementX: 100,
        textStyle: const TextStyle(
          fontSize: 18,
          color: Colors.black,
          fontWeight: FontWeight.w500,
        ),
      ),
    );
  }
}

这个示例创建了一个包含8个列表的看板，每个列表中有50个项目。通过回调函数可以监听用户的交互事件，并进行相应的处理。

希望这个示例能帮助你快速上手 kanban_board 插件！


更多关于Flutter看板管理插件kanban_board的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter看板管理插件kanban_board的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用kanban_board插件来创建看板管理功能的示例代码。这个示例将展示如何初始化插件、创建任务卡片以及基本的拖放功能。

首先，确保你的Flutter项目中已经添加了kanban_board插件。你可以在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  kanban_board: ^latest_version  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，是示例代码，展示了如何使用kanban_board插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Kanban Board Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: KanbanScreen(),
    );
  }
}

class KanbanScreen extends StatefulWidget {
  @override
  _KanbanScreenState createState() => _KanbanScreenState();
}

class _KanbanScreenState extends State<KanbanScreen> {
  final List<BoardColumn> columns = [
    BoardColumn(
      title: 'To Do',
      cards: [
        BoardCard(
          id: '1',
          title: 'Task 1',
          description: 'Description for Task 1',
        ),
        BoardCard(
          id: '2',
          title: 'Task 2',
          description: 'Description for Task 2',
        ),
      ],
    ),
    BoardColumn(
      title: 'In Progress',
      cards: [],
    ),
    BoardColumn(
      title: 'Done',
      cards: [],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kanban Board'),
      ),
      body: KanbanBoard(
        columns: columns,
        onCardDragStarted: (card) {
          print('Dragging started for card: ${card.title}');
        },
        onCardDragEnded: (fromColumn, toColumn, card) {
          setState(() {
            // Remove the card from the original column
            fromColumn.cards.removeWhere((c) => c.id == card.id);
            // Add the card to the destination column
            toColumn.cards.add(card);
          });
          print('Dragging ended. Card moved from ${fromColumn.title} to ${toColumn.title}');
        },
      ),
    );
  }
}

// BoardColumn and BoardCard models as per the plugin's requirements
class BoardColumn {
  final String title;
  final List<BoardCard> cards;

  BoardColumn({required this.title, required this.cards});
}

class BoardCard {
  final String id;
  final String title;
  final String description;

  BoardCard({required this.id, required this.title, required this.description});
}

在这个示例中：

  1. 定义数据结构：BoardColumn和BoardCard类用于表示看板的列和卡片。这些类根据kanban_board插件的需求定义。

  2. 创建看板列：在KanbanScreen的columns列表中，我们定义了三个列：To Do、In Progress和Done，并在To Do列中添加了两个任务卡片。

  3. 构建看板：使用KanbanBoard组件，并将列数据传递给它。

  4. 拖放功能：通过onCardDragStarted和onCardDragEnded回调处理卡片的拖放事件。在拖放结束时，我们将卡片从原始列中移除，并添加到目标列中。

请注意，kanban_board插件的具体API可能有所不同，因此你可能需要参考插件的官方文档以获取最新的使用方法和API。上述代码是一个基本的示例，用于展示如何设置和使用该插件。

回到顶部