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程序中首行#!/usr/bin/env python的作用
1.通常我们在pycharm中写程序的时候会在首行写上#!/usr/bin/env python 如: #!/usr/bin/env python3#-*-coding: UTF-8 -*-#Auth ...
- 「一本通 1.3 例 4」Addition Chains
Addition Chains 题面 对于一个数列 \(a_1,a_2 \dots a_{m-1},a_m\) 且 \(a_1<a_2 \dots a_{m-1}<a_m\). 数列中的一 ...
- java项目相对路径
./的含义: eclipse相对路径是相对项目的src目录来说的,而不是相对于当前文件. "./某某文件.txt" 而idea则相对于项目根目录 "./src/某某文件. ...
- List对象集合根据组合属性进行差集运算
背景 当List是一个基本数据类型的集合的时候,进行集合运算还比较方便,但是有这么一些业务场景,比如某个用户权限变化的列表,或者取数据的变化结果,当时有时候用笨方法多循环两次也是可以的,只不过代码 ...
- 跟着Vimtutor学习Vim
跟着Vimtutor学习Vim Lesson 1 1.1 移动光标 在Vim中移动光标,分别使用h.j.k.l键代表左.下.上.右方向. 1.2 退出VIM :q! <ENTER> 退出V ...
- 我们到底为什么要用 IoC 和 AOP
作为一名 Java 开发,对 Spring 框架是再熟悉不过的了.Spring 支持的控制反转(Inversion of Control,缩写为IoC)和面向切面编程(Aspect-oriented ...
- Birkhoff-von Neumann Crossbar 光交换网络的调度方案
Birkhoff-von Neumann Crossbar 光交换网络的调度方案 This is a summary aimed at looking for "high perform ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 原型和原型链
JavaScript 原型和原型链 在阅读本文章之前,已经默认你了解了基础的 JavaScript 语法知识,基础的 ES6 语法知识 . 本篇文章旨在为 JavaScript继承 打下基础 原型 在 ...
- SOLID:面向对象设计的五个基本原则
在程序设计领域,SOLID 是由罗伯特·C·马丁在 21 世纪早期引入的记忆术首字母缩略字,指代了面向对象编程和面向对象设计的五个基本原则.当这些原则被一起应用时,它们使得一个程序员开发一个容易进行软 ...
- 年度账单h5 移动端兼容问题以及优化建议(vue)
定时器 vue实例中定义timer多余,创建的定时器代码和销毁定时器的代码没有放在一起,通常很容易忘记去清理这个定时器,不容易维护:建议使用this.$once('hook:beforeDestory ...