flutter ReorderableListView 拖拽列表

ReorderableListView示例：实现应用列表拖拽排序

原创已于 2023-12-28 14:33:52 修改 · 976 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #ios #android

于 2023-12-28 14:32:04 首次发布

本文介绍了如何在Flutter中使用ReorderableListView构建一个可拖动排序的应用列表，展示了如何设置header、监听reorder事件以及自定义拖拽手势。

//需要渲染的数据
  List rankAppList = ["11111", "22222", "33333", "566577453"];

///文中用到的单位rpx为适配单位，不需要的可以删掉单位，需要的可以看我以前的文章

	Container(
        margin: EdgeInsets.only(top: 24.rpx),
        child: ReorderableListView.builder(
          shrinkWrap: true,
          itemCount: rankAppList.length,
          physics: const NeverScrollableScrollPhysics(),
          /// header参数可以放一些需要的widget，
          header: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
            ],
          ),
          onReorder: (int oldIndex, int newIndex) {
            var oldIndexChild = rankAppList.removeAt(oldIndex);
            if(oldIndex < newIndex){
              ///往下拉。这里往下拉的索引需要➖ 1
              rankAppList.insert(newIndex - 1, oldIndexChild);
            }else{
              ///往上拉
              rankAppList.insert(newIndex, oldIndexChild);
            }
            setState(() {});
          },
          /// buildDefaultDragHandles参数设置为false就可以自己来定义拖拽的按钮，默认为true，整个item都可拖拽
          buildDefaultDragHandles: false,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              height: 60.rpx,
              alignment: Alignment.center,
              /// 需要设置key值
              key: ObjectKey(rankAppList[index]),
              margin: EdgeInsets.only(bottom: 12.rpx,top: 12.rpx),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        width: 34.rpx,
                        height: 34.rpx,
                        alignment: Alignment.center,
                        decoration: const BoxDecoration(
                            shape: BoxShape.circle,
                            color: Color(0xff1A71FF)),
                        child: Text(
                          "${index + 1}",
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 24.rpx,
                              fontWeight: FontWeight.w400),
                        ),
                      ),
                      SizedBox(
                        width: 15.rpx,
                      ),
                      Text(rankAppList[index])
                    ],
                  ),
                  /// 配合buildDefaultDragHandles参数使用 包裹想要拖拽的组件
                  ReorderableDragStartListener(
                    index: index,
                    child: Image.asset(
                      "lib/images/chage_sequence.png",
                      width: 40.rpx,
                      height: 32.rpx,
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      )