Flutter實現不規則瀑布流布局拖拽重排序

因為業務,所以需要用flutter去實現一種不規則圖形的瀑布流,但是同時需要支持拖拽并重新排序。效果類似如下。

在這里插入圖片描述

查詢過現有的插件,要么是僅支持同樣大小的組件進行排序,要么就是動畫效果不是很滿意,有點死板,總有這樣那樣的問題,所以自己寫了一個,地址如下:staggered_reorderable

version 0.0.12支持的功能:

  1. scrollDirection :指定布局方向,支持水平和垂直。
  2. duration :拖拽時觸發重排序的動畫持續時間。
  3. antiShakeDuration:防抖時間,為了防止臨界點時頻繁觸發重排序(只能解決一部分,還是會出現,后續會優化掉),默認milliseconds:100
  4. collation :拖拽完成后的交換規則,true:交換,false:插入,默認false。
  5. children :布局的子項,需要是List<*ReorderableItem*> 類型。
  6. columnNum:布局的個數,垂直布局時為每行,水平布局時為每列,默認3。
  7. spacing:間隙 ,默認5.0。
  8. canDrag:是否允許拖拽,不允許則為單純的不規則圖形瀑布流布局。
  9. forwardRedundancy :自動滾動冗余偏移量[Axis.vertical]向上; [Axis.horizontal]向左,默認40.0。
  10. backwardRedundancy :自動滾動冗余偏移量[Axis.vertical]向下; [Axis.horizontal]向右,默認40.0。
  11. scrollStep:每次自動滾動長度,默認10.0。
  12. onReorder :每次交換完會調用此方法,獲取排序后的trackingNumber列表。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/83056.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/83056.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/83056.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

微信小程序(uniapp)實現騰訊云 IM 消息撤回

uniapp 實現騰訊云 IM 消息撤回功能實戰指南 一、功能實現原理 騰訊云 IM 的消息撤回功能通過 消息修訂&#xff08;Message Revision&#xff09; 機制實現&#xff0c;核心流程如下&#xff1a; 發送方調用撤回 API 刪除指定消息云端生成撤回通知消息&#xff08;類型為 T…

AI入門示例

市面上有很多AI大模型&#xff0c;這里以 智譜的大模型 為示例 1.先要注冊智譜AI開放平臺 2.注冊成功后&#xff0c;會贈送3個月的免費額度&#xff0c;如下 3.然后去控制臺&#xff0c;創建一個API KEY 4.接著就可以開始寫代碼了 提前導入包&#xff1a; openai 示例1&…

【數據結構】單鏈表練習

1.鏈表的中間節點 https://leetcode.cn/problems/middle-of-the-linked-list/description/ 用快慢指針來解決 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* middleNode(struct ListNode* he…

嘗鮮純血鴻蒙,華為國際版本暫時不支持升級。如mateX6 國際版?為什么不支持?什么時候支持?

一&#xff1a;mateX6 國際版支持鴻蒙嗎&#xff1f; 不支持 二&#xff1a;華為國際版支持鴻蒙嗎&#xff1f; 不支持 三&#xff1a;華為國際版什么時候支持&#xff1f; 2025年預期可以支持。請耐心等待。 三&#xff1a;國際版為什么不支持&#xff1f; EMUI 采用AO…

Spring Boot的啟動流程,以及各個擴展點的執行順序

目錄 1. 初始化階段執行順序 1.1 Bean的構造方法&#xff08;構造函數&#xff09; 1.2 PostConstruct 注解方法 1.3 InitializingBean 的 afterPropertiesSet() 1.4 Bean(initMethod "自定義方法") 2. 上下文就緒后的擴展點 2.1 ApplicationContext 事件監聽…

刀具問題討論

1 刀具的問題概述 問題描述 一道工序用自動化車床連續加工某種零件&#xff0c;由于刀具損壞等原因該工序會出現故障&#xff0c;其中刀具損壞故障占95%, 其它故障僅占 5%。工序出現故障是完全隨機的, 假定在生產任一零件時出現故障的機會均相同。工作人員通過檢查零件來確定…

vite配置一個css插件

vite.config.js的plugins執行函數 該例子只是替換一些css,具體內容不重要,主要看形參的運用 // vite-plugin-css.js export default function cssPlugin() {return {name: vite-plugin-css-post, // 插件的名字&#xff0c;Vite 插件必須有名字enforce: post, // 設定插件執…

?1.1.1 按位與運算替代求余運算優化場景

在計算機編程中&#xff0c;使用按位與運算&#xff08;&&#xff09;替代求余運算&#xff08;%&#xff09;可以提高效率的特殊場景是&#xff1a;當除數是 2 的整數次冪&#xff08;即 ( b 2^n )&#xff0c;其中 ( n ) 為自然數&#xff09;時。例如&#xff0c;( b …

CentOS 7 環境中部署 LNMP(Linux + Nginx + MySQL 5.7 + PHP)

在 CentOS 7 環境中部署 LNMP&#xff08;Linux Nginx MySQL 5.7 PHP&#xff09; 環境的詳細步驟如下。此方案確保各組件版本兼容&#xff0c;并提供完整的配置驗證流程。 1. 更新系統 sudo yum update -y 2. 安裝 MySQL 5.7 2.1 添加 MySQL 官方 YUM 倉庫 由于MySQL并不…

UniApp微信小程序自定義導航欄實現

UniApp微信小程序自定義導航欄 在UniApp開發微信小程序時&#xff0c;頁面左上角默認有一個返回按鈕&#xff08;在導航欄左側&#xff09;&#xff0c;但有時我們需要自定義這個按鈕的樣式和功能&#xff0c;同時保持與導航欄中間的標題和右側膠囊按鈕&#xff08;藥丸屏&…

Java大師成長計劃之第35天:未來展望與個人總結

引言 作為一門歷史悠久的編程語言&#xff0c;Java自1995年問世以來&#xff0c;經歷了多個版本的迭代與演進&#xff0c;依然在當今技術生態中占據著重要地位。從早期的Java SE、Java EE到后來的Java Spring框架&#xff0c;再到現代的微服務架構與云原生應用&#xff0c;Jav…

Ubuntu開機自動運行Docker容器中的Qt UI程序

Ubuntu開機自動運行Docker容器中的Qt UI程序 引言為什么需要這樣配置?解決方案概覽詳細實現步驟1. 創建容器啟動腳本2. 創建系統服務3. 配置自動登錄和顯示設置常見問題解決方案1. 程序無法顯示(X11權限問題)2. 分辨率設置不生效3. 服務啟動失敗安全注意事項結語附錄:完整文…

Scratch節日 | 龍舟比賽 | 端午節

端午節快樂&#xff01; 這款專為孩子們打造的Scratch游戲——《龍舟比賽》&#xff0c;讓你在掌控龍舟的競速中&#xff0c;沉浸式體驗中華傳統節日的魅力&#xff01; &#x1f3ae; 游戲亮點 節日氛圍濃厚&#xff1a;化身龍舟選手&#xff0c;在波濤洶涌的河流中展開刺激競…

(五)MMA(OpenTelemetry/Rabbit MQ/ApiGateway/MongoDB)

文章目錄 項目地址一、OpenTelemetry1.1 配置OpenTelemetry1. 服務添加2. 添加服務標識3. 添加請求的標識4. 添加中間價 二、Rabbit MQ2.1 配置Rabbit MQ1. docker-compose2. 添加Rabbit MQ的Connect String 2.2 替換成Rabbit MQ1. 安裝所需要的包2. 使用 三、API Gateways3.1 …

格恩朗超聲波水表 助力農業精準灌溉與振興?

在農業現代化的征程中&#xff0c;水資源的精準利用至關重要&#xff0c;而這離不開高精度計量設備的支持。大連格恩朗品牌積極響應國家全面推進鄉村振興、加快農業農村現代化的號召&#xff0c;精心打造的超聲波水表&#xff0c;憑借其超高精度&#xff0c;成為綠色灌溉領域的…

微信小程序頁面嵌套web-view點擊系統導航返回時進行彈窗處理

實現效果&#xff1a;微信小程序頁面嵌套web-view點擊系統導航返回時進行彈窗處理 首先在web-view里是不可實現的&#xff08;據我了解下來&#xff09; 參考小程序文檔&#xff1a;page-container 大致邏輯&#xff1a; 1、page-container可實現頁面離開前攔截 2、由于web-vie…

設計模式25——中介者模式

寫文章的初心主要是用來幫助自己快速的回憶這個模式該怎么用&#xff0c;主要是下面的UML圖可以起到大作用&#xff0c;在你學習過一遍以后可能會遺忘&#xff0c;忘記了不要緊&#xff0c;只要看一眼UML圖就能想起來了。同時也請大家多多指教。 中介者模式&#xff08;Mediat…

Java基礎 Day25

一、線程通信 1、簡介 確保線程能夠按照預定的順序執行并且能夠安全地訪問共享資源 使多條線程更好的進行協同工作 2、常用方法 void wait() 使當前線程進入等待狀態 void notify(); 隨機喚醒單個等待的線程&#xff08;可以空喚醒&#xff09; void notifyAll(); 喚醒…

WebSocket與實時對話式AI服務的集成

WebSocket與實時對話式AI服務的集成 在現代對話式AI系統中,傳統的HTTP請求-響應模型已難以滿足實時交互的體驗需求。特別是用戶對響應速度、逐字輸出、會話上下文保持等方面提出更高要求時,需要一種能夠建立持久連接并支持雙向通信的協議。WebSocket正是在這一背景下,成為A…

iOS 集成網易云信IM

云信官方文檔在這 看官方文檔的時候&#xff0c;版本選擇最新的V10。 1、CocoPods集成 pod NIMSDK_LITE 2、AppDelegate.m添加頭文件 #import <NIMSDK/NIMSDK.h> 3、初始化 NIMSDKOption *mrnn_option [NIMSDKOption optionWithAppKey:"6f6568e354026d2d658a…