Flutter 拖动排序列表与跨平台优化实践

Tue, 30 Mar 2021 00:00:00 +0000

Flutter 中实现拖动排序的列表非常简单，使用官方的ReorderableListView替代原本的ListView即可，ListView.builder同理。

 return ReorderableListView(
// padding: const EdgeInsets.symmetric(horizontal: 40),
 children: <Widget>[
for (int index = 0; index < _items.length; index++)
ListTile(
key: Key('$index'),
tileColor: _items[index].isOdd ? oddItemColor : evenItemColor,
title: Text('Item ${_items[index]}'),
),
],
onReorder: (int oldIndex, int newIndex) {
setState(() {
if (oldIndex < newIndex) {
newIndex -= 1;
}
final int item = _items.removeAt(oldIndex);
_items.insert(newIndex, item);
});
},
);
}

上面是官方给的 demo，简洁明了。官方介绍视频下面的评论里，人家直呼比原生 Android 写的过瘾的多。阅读文档后我给我的 App 的界面也加上了可拖动排序的功能。效果如下图

虽然可以实现拖动了，但是右边有一个按钮很碍眼。不过这个是用来控制拖动的，鼠标移上去才能触发拖动。

翻了翻文档发现，这个地方ReorderableListView在移动端和桌面端的处理是不一样的，上图（桌面 macos）右边会出现一个 dragHandler，而移动端则是靠长按列表项触发拖动。

要把这个碍眼的图标去掉，有两个方案：

找到定义这个图标的地方，更换一个合适的图标，并在外面包裹一层，仅在鼠标 hover 时将图标显示以进行拖动，其他情况下隐藏
将拖动的实现定义为和移动端相同，即都通过长按列表项触发拖动

针对方案一，以ReorderableListView 和Icon为关键词搜索，很遗憾的是并没有这方面的资料，又翻了翻源码，并没有找到可以自定义右边这个拖拽按钮的实现。

在 Flutter 官方的 Github 仓库的 issue 中，https://github.com/flutter/flutter/issues/66080#issuecomment-771123430 对相关问题做了阐述，并有提案对ReorderableListView进行了改进。该 issue 对应的 pr 已经被合并到 stable channel，查阅相关 API 后了解到可以使用buildDefaultDragHandles: false，关闭默认的拖拽触发实现，再使用ReorderableDelayedDragStartListener包裹原先的ListTile即可实现桌面端和移动端都通过长按列表项触发拖拽排序。

不过相应的，ListTile 的onLongPress就不能再有响应了。刚好今天完成了滑动删除的实现，现在列表也的删除、排序已经高度可用且多平台统一了。

附相关代码实现：

body: ReorderableListView.builder(
buildDefaultDragHandles: false,
onReorder: (int oldIndex, int newIndex) {
setState(() {
if (oldIndex < newIndex) newIndex -= 1;
var temp = l.removeAt(oldIndex);
l.insert(newIndex, temp);
});
},
itemCount: l.length,
itemBuilder: (context, index) {
final item = l[index];
return Dismissible(
key: item.key,
background: listTileBackground(),
onDismissed: (direction) {
setState(() {
lastDeleted = item;
l.removeAt(index);
});
ScaffoldMessenger.of(context).showSnackBar(msgDeleted);
},
child: ReorderableDelayedDragStartListener(
key: item.key,
index: index,
child: ListTile(
title: Text(item.title),
subtitle: Text(item.content),
contentPadding: EdgeInsets.fromLTRB(16, 8, 16, 8),
onTap: () {
//your function here
 },
// onLongPress: () {
 // lastDeleted = item;
 // l.removeAt(index);
 // setState(() {});
 // ScaffoldMessenger.of(context)
 // .showSnackBar(msgDeleted);
 // },
 )));
})));

Colin's 实验室 - 2021 春

Thu, 25 Feb 2021 00:00:00 +0000

小玩具及他们的 demo

英语文本智能查词（Project Sweeper）

自动分割给定的英文文本，提取词元后在数据库中搜索，根据给定的词汇量和难度等级进行筛选，只能提取阅读障碍词汇并高亮当前备考项目（如四级）的重点单词

知乎爬虫及 JS 逆向

日常用 RSS 订阅知乎的一些高质量专栏。但由于知乎本事并不支持 RSS，内容大多通过 RSShub 来的，其本质是个爬虫，经常会受到前端页面结构变更的影响。为了应对这个变化，RSShub 中对于知乎相关页面的爬取规则必须得重写。

分析了一通知乎的页面，发现有个接口可以直接请求，但是会检验 header。header 里面有几项特殊的自定义参数，x-zse-83 和 x-zse-86等。为了搞清楚这里面的数值怎么来的，就必须对知乎前端页面资源中的一个 js 文件进行逆向分析。

逆向折腾了大半天，就快要成功提取核心加密函数的时候，发现知乎的前端页面为了 SEO 有加入一页的文章列表数据，可以直接用上。考虑到逆向的工作量和潜在的法律问题，遂放弃原本的方案。

新的方案完成后，已向 RSShub 提交 PR 并已被合并。

MC 服务器搭建与极限优化

1 核 2G 学生机，从 2 人联机频频崩溃到 8 人挖矿毫无压力，学习了 JVM GC 种种，对服务端程序的一些参数也渐渐熟悉。优化效果喜人，总有还能压榨的性能，就像资本家看手下的骡子一样 hhh

洞洞板/冰箱贴/CVPRO/（…没想好名字）

一款跨平台的灵感素材收集与简易管理 App，基于 Flutter 构建，跨平台，颜值在线。

持续开发中，附 roadmap

version 1.0

[x] Text support
[x] Key shortcut support
[x] About Page
[ ] Content editing
[x] List item dismiss [x] List Sorting

Future - Key functions

[ ] Data Storage
[ ] Pic support
[ ] Trashbin
[ ] File support
[ ] Multiple List

Future - Key features

[ ] Grid view
[ ] Drag and Drop support
[ ] Card resize

Future - Extra

[ ] Text reformat, delete useless spaces etc.
[ ] Pic OCR support
[ ] WebDav support and automatically upload files<10M

Flutter on Colinx Blog

Flutter 拖动排序列表与跨平台优化实践

Colin's 实验室 - 2021 春

英语文本智能查词（Project Sweeper） #

知乎爬虫及 JS 逆向 #

MC 服务器搭建与极限优化 #

洞洞板/冰箱贴/CVPRO/（…没想好名字） #

英语文本智能查词（Project Sweeper）

知乎爬虫及 JS 逆向

MC 服务器搭建与极限优化

洞洞板/冰箱贴/CVPRO/（…没想好名字）