Flutter ReorderableListView 可拖拽的列表
import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<String> items = List.generate(10, (int i) => '$i');
@override
Widget build(BuildContext context) {
return Scaffold(
body: ReorderableListView(
onReorder: (int oldIndex, int newIndex) {
print(oldIndex);
print(newIndex);
var element = items[oldIndex];
if (newIndex >= items.length) newIndex = items.length - 1;
setState(() {
items.removeAt(oldIndex);
items.insert(newIndex, element);
});
},
children: <Widget>[
for (String el in items)
ListTile(
key: ValueKey(el),
title: Text('Item $el'),
),
],
),
);
}
}
Flutter ReorderableListView 可拖拽的列表的更多相关文章
- jQuery可拖拽排序列表jquery-sortable-lists
jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...
- Vue拖拽组件列表实现动态页面配置
需求描述 最近在做一个后台系统,有一个功能产品需求是页面分为左右两部分,通过右边的组件列表来动态配置左边的页面视图,并且左边由组件拼装起来的视图,可以实现上下拖拽改变顺序,也可以删除. 根据这个需求我 ...
- flutter Draggable Widget拖拽控件
Draggable Widget Draggable控件负责就是拖拽,父层使用了Draggable,它的子元素就是可以拖动的,子元素可以实容器,可以是图片.用起来非常的灵活. 参数说明: data: ...
- HTML5应用之文件拖拽上传
使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器.本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧. H ...
- [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...
- 关于d3.js 将一个element 拖拽到另一个element的响应事件
rt 正在做机柜可视化, 一个需求是能拖拽左侧列表的设备名称, 拖到右侧42U机柜中,并将设备图片放置在对应机柜位置上. 开始的时候一切都很顺利,点击左侧设备名称,添加一个g容器,将设备名称作为tex ...
- QML学习笔记(七)— 实现可拖拽、编辑、选中的ListView
鼠标单击可选中当前项,头部呈绿色显示:按压当前项可进行拖拽更换列表项位置:点击数据可以进行编辑: GitHub:八至 作者:狐狸家的鱼 这里是自己定义的model,有些字体和颜色都是使用的全局属性, ...
- 浅谈js拖拽
本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...
- WPF MultiSelect模式下ListBox 实现多个ListBoxItem拖拽
WPF 的ListBox不支持很多常见的用户习惯,如在Explorer中用鼠标可以选择多项Item,并且点击已经选择的Item,按住鼠标左键可以将所有已选择Item拖拽到指定的位置.本文简单的实现了这 ...
随机推荐
- Python程序中#-*-coding: UTF-8 -*-的作用
1.通常我们在pycharm中写程序的时候会加上#-*coding: UTF-8 -*- 如: #!/usr/bin/env python3#-*-coding: UTF-8 -*-#Author x ...
- 题解 P3833 【[SHOI2012]魔法树】
题目 直通车 很显然这是个树刨的板子,树上链查询和子树查询 注意: 1.这个点的树根为 0 而不是 1 所以注意读图时点标号 +1 就解决了 2.注意数据范围\(2^{32}\) 然后板子就能过了 n ...
- C#编写一个在asp.net core 3.1下的简单的corn模式的计划任务和一个更简单的定时器类
asp.net core 下,新增了一个BackgroundService用来实现能在后台跑一个长久运行的任务,因此,也可以用来替换掉原来使用的static的Timer组件, Timer组件主要有以下 ...
- centos6.5安装KVM,并在KVM中安装虚拟6.5系统
=============================环境搭建================================================== 1.检查CPU信息 KVM 需要 ...
- SSL与HTTPS协议
1.SSL 1.1 什么是SSL SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及 ...
- 洛谷P4719 【模板】"动态 DP"&动态树分治
[模板]"动态 DP"&动态树分治 第一道动态\(DP\)的题,只会用树剖来做,全局平衡二叉树什么的就以后再学吧 所谓动态\(DP\),就是在原本的\(DP\)求解的问题上 ...
- A. Crazy Town
Crazy Town is a plane on which there are n infinite line roads. Each road is defined by the equation ...
- HDU 1173 思路题
题目大意 有n个地点(坐标为实数)需要挖矿,让选择一个地点,使得在这个地方建造基地,到n个地点的距离和最短,输出基地的坐标. 题解+代码: 1 /* 2 把这个二维分开看(即把所有点投影到x轴上,再把 ...
- 六、Python集合定义和基本操作方法
一.集合的定义方法及特点 1.特点: (1)由不同元素组成 #集合由不同元素构成 s={1,2,3,3,4,3,3,} print(s)#运行结果:{1, 2, 3, 4} (2)集合无序 #集合无序 ...
- Gome 高性能撮合引擎微服务
Gome 高性能撮合引擎微服务 使用 Golang 做计算,gRPC 做服务,ProtoBuf 做数据交换,RabbitMQ 做队列,Redis 做缓存实现的高性能撮合引擎微服务 依赖 具体依赖信息可 ...