Flutter ：拖拽排序 ReorderableListView

ReorderableListView是通过长按拖动某一项到另一个位置来重新排序的列表组件。

使用：下面实现功能为：头部“新增收藏夹”不动，下面cell可以拖拽排序

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:trade_app/base/baseColor.dart';
import 'package:trade_app/base/baseSize.dart';
import 'package:trade_app/base/baseTextStyle.dart';
import 'package:trade_app/pages/utils/icon_utils.dart';

class FavoritesManagementPage extends StatefulWidget {
  @override
  FavoritesManagementPageState createState() => FavoritesManagementPageState();
}

class FavoritesManagementPageState extends State<FavoritesManagementPage> {
  List list = ['一级商户价签', '二级商户价签', '三级商户价签', '四级商户价签'];

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  _onReorder(int oldIndex, int newIndex) {
    print('oldIndex: $oldIndex , newIndex: $newIndex');
    setState(() {
      if (newIndex == list.length) {
        newIndex = list.length - 1;
      }
      var item = list.removeAt(oldIndex);
      list.insert(newIndex, item);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        brightness: Brightness.light,
        leading: IconButton(
            icon: Image.asset(IconUtils.getIconPath('fanhui')),
            onPressed: () => Navigator.pop(context)),
        title: Text(
          '收藏夹管理',
          style: TextStyle(color: BaseColor.colorFF262626, fontSize: 18),
        ),
        backgroundColor: Colors.white,
      ),
      body: ReorderableListView(
        header: cellManageHead(),
        children: list.map((e) => cellManage(e)).toList(),
        onReorder: _onReorder,
      ),
      backgroundColor: BaseColor.colorFFF5F5F5,
    );
  }
}

Widget cellManage(String name) {
  return Container(
    key: ValueKey(name),
    margin: EdgeInsets.only(
        left: BaseSize.dp(15),
        right: BaseSize.dp(15),
        top: BaseSize.dp(8),
        bottom: BaseSize.dp(8)),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      color: Colors.white,
    ),
    height: BaseSize.dp(48),
    child: Row(
      children: <Widget>[
        SizedBox(width: BaseSize.dp(12)),
        ImageIcon(
          IconUtils.getAssetIcon('ic_fold_edit'),
          color: BaseColor.colorFF03B798,
        ),
        SizedBox(width: BaseSize.dp(6)),
        Text(
          name,
          style: BaseTextStyle.style333333_15,
        )
      ],
    ),
  );
}

Widget cellManageHead() {
  return Container(
    margin: EdgeInsets.only(
        left: BaseSize.dp(15),
        right: BaseSize.dp(15),
        top: BaseSize.dp(16),
        bottom: BaseSize.dp(8)),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      color: Colors.white,
    ),
    height: BaseSize.dp(48),
    child: Row(
      children: <Widget>[
        SizedBox(width: BaseSize.dp(12)),
        ImageIcon(
          IconUtils.getAssetIcon('ic_fold_add'),
          color: BaseColor.colorFF03B798,
        ),
        SizedBox(width: BaseSize.dp(6)),
        Text(
          '新增收藏夹',
          style: BaseTextStyle.style333333_15,
        )
      ],
    ),
  );
}

在Column中嵌套ReorderableListView，时需要使用Expanded Widget 包装ReorderableListView

body: Column(
        children: <Widget>[
          Text('哈哈哈'),
          Expanded(
              child: ReorderableListView(
            header: cellManageHead(),
            children: list.map((e) => cellManage(e)).toList(),
            onReorder: _onReorder,
          ))
        ],
      ),