Flutter自定义布局插件flutter_boardview的使用

flutter_boardview 是一个强大的自定义控件，可以创建类似 Trello 或 Jira 界面的可拖拽看板。它提供了直观的拖放功能，使用户能够轻松地重新排序和管理项目。

安装

首先，在 pubspec.yaml 文件中添加 flutter_boardview 依赖：

dependencies:
  flutter:
    sdk: flutter
  boardview: ^latest_version

然后运行 flutter pub get 来安装该插件。

使用示例

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

主应用文件 (main.dart)

import 'package:flutter/material.dart';
import 'example_board.dart'; // 假设这个文件包含了我们的看板实现
import 'pagination_scroll_board.dart'; // 假设这个文件包含了无限滚动列表的实现

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

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

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

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

  @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
  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);
}

示例看板 (example_board.dart)

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

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

  @override
  _ExampleBoardState createState() => _ExampleBoardState();
}

class _ExampleBoardState extends State<ExampleBoard> {
  BoardViewController boardViewController = BoardViewController();

  List<BoardList> _lists = [
    BoardList(
      headerBackgroundColor: const Color.fromARGB(255, 235, 236, 240),
      backgroundColor: const Color.fromARGB(255, 235, 236, 240),
      header: [
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(5),
            child: Text(
              "To Do",
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ],
      items: [
        BoardItem(
          item: Card(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text("Task 1"),
            ),
          ),
        ),
        BoardItem(
          item: Card(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text("Task 2"),
            ),
          ),
        ),
      ],
    ),
    BoardList(
      headerBackgroundColor: const Color.fromARGB(255, 235, 236, 240),
      backgroundColor: const Color.fromARGB(255, 235, 236, 240),
      header: [
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(5),
            child: Text(
              "In Progress",
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ],
      items: [],
    ),
    BoardList(
      headerBackgroundColor: const Color.fromARGB(255, 235, 236, 240),
      backgroundColor: const Color.fromARGB(255, 235, 236, 240),
      header: [
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(5),
            child: Text(
              "Done",
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ],
      items: [],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return BoardView(
      lists: _lists,
      boardViewController: boardViewController,
    );
  }
}

关键类介绍

• BoardView: 接受一个 List<BoardList> 和一个可选的 BoardViewController。
• BoardList: 包含一系列回调方法，用于处理拖动事件，并且有一个头部组件。
• BoardItem: 每个条目也有自己的拖动回调方法，通过长按开始拖动。

通过上述代码和结构，您可以创建一个动态、灵活的看板界面，满足您的各种需求。