搜尋套件、儲存庫與 APP 分類

boardview 封面
套件詳情v1.0.0

boardview

這是一個自訂的 Flutter 小部件,可建立可拖曳的 BoardView,亦稱為看板。此視圖可透過拖放進行重新排序。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
3140
喜歡數
146
Pub 分數
140

安裝套件

flutter pub add boardview

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

BoardView 是一個可自訂的 Flutter 小工具,專為建立可拖曳的看板式面板而設計。它讓使用者能透過直覺的拖放互動來重新排序欄位與卡片,非常適合任務管理與工作流程視覺化。此小工具以效能與彈性為設計核心,支援 Android、iOS、Web、macOS、Windows 與 Linux 等多個平台。該小工具具有高度擴展性,並能順暢整合至現有的 Flutter 應用程式中。

適用情境

  • 任務管理應用程式
  • 專案規劃工具
  • 工作流可視化
  • 自定義看板
  • 拖放介面

主要特色

  • 拖曳重新排序
  • 可自訂的欄位與卡片配置
  • 跨平台相容性
  • 可擴展的設計
  • 平滑動畫

適合對象

  • 開發 Kanban 界面的開發者
  • 管理工作流的團隊
  • 需要視覺任務組織的應用程式
  • 尋求互動元件的UI設計師
  • Flutter 項目在多個平台

使用建議

  • 需要了解 Flutter 手勢處理
  • 複雜設計可能需要額外的樣式
  • 效能取決於項目數量
  • 有限的內建資料完整性驗證
  • 需要自定義邏輯以實現持久化

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

pub package

Flutter BoardView

This is a custom widget that can create a draggable BoardView or also known as a kanban. The view can be reordered with drag and drop.

Installation

Just add boardview to the pubspec.yaml file.

Usage Example

To get started you can look inside the /example folder. This package is broken into 3 core parts

Example

BoardView

The BoardView class takes in a List of BoardLists. It can also take in a BoardViewController which is can be used to animate to positions in the BoardView


BoardViewController boardViewController = new BoardViewController();

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

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

BoardList

The BoardList has several callback methods for when it is being dragged. The header item is a Row and expects a List as its object. The header item on long press will begin the drag process for the BoardList.


    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

The BoardItem view has several callback methods that get called when dragging. A long press on the item field widget will begin the drag process.


    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"),
          ),
        )
    );

所屬分類

依賴

依賴清單 1 項

原始碼儲存庫

使用此套件的專案