如何在Flutter中制作可重新排序的物品

Question

我有此自定义列表项，允许用户扩展和折叠项。它工作正常，但我想使它们对于父项和子项也都可以重新排序，但是我是Flutter的新手，所以我不确定如何实现这一目标。

关于如何使父项重新排序以及使子项在父内部重新排序的任何建议。 （下图）

import 'package:flutter/material.dart';

class CustomModel {
  String title;
  bool isExpanded;
  List<String> subItems;

  CustomModel({this.title, this.subItems, this.isExpanded = false});
}

class MyReoderWidget extends StatefulWidget {
  @override
  _MyReoderWidgetState createState() => _MyReoderWidgetState();
}

class _MyReoderWidgetState extends State<MyReoderWidget> {
  List<CustomModel> listItems;

  @override
  void initState() {
    super.initState();
    listItems = List<CustomModel>();
    listItems.add(CustomModel(
        title: "App Name 1", subItems: ["Card Name 1", "Card Name 2"]));
    listItems.add(CustomModel(
        title: "App Name 2", subItems: ["Card Name 3", "Card Name 4"]));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
          children: listItems
              .map((model) => new Padding(
                    padding: EdgeInsets.only(
                      bottom: 10,
                    ),
                    child: ExpandableCardContainer(
                      isExpanded: model.isExpanded,
                      collapsedChild: createHeaderCard(model),
                      expandedChild: Column(
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(
                              bottom: 10,
                            ),
                            child: createHeaderCard(model),
                          )
                        ]..addAll(model.subItems
                            .map((e) => createChildCard(e))
                            .toList()),
                      ),
                    ),
                  ))
              .toList()),
    );
  }

  Widget createHeaderCard(CustomModel model) {
    return Container(
      margin: EdgeInsets.only(left: 20, right: 20),
      child: Row(
        children: <Widget>[
          Icon(
            Icons.more_vert,
            color: Colors.white,
          ),
          Expanded(
            child: Text(
              model.title,
              style: TextStyle(color: Colors.white),
            ),
          ),
          GestureDetector(
            onTap: () {
              setState(() {
                model.isExpanded = !model.isExpanded;
              });
            },
            child: Icon(
              model.isExpanded
                  ? Icons.keyboard_arrow_up
                  : Icons.keyboard_arrow_down,
              color: Colors.white,
            ),
          )
        ],
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Color(0xFF132435),
      ),
      height: 50,
    );
  }

  Widget createChildCard(String subItems) {
    return Container(
      margin: EdgeInsets.only(left: 80, bottom: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(
            Icons.more_vert,
            color: Colors.white,
          ),
          Expanded(
            child: Text(
              subItems,
              style: TextStyle(color: Colors.white),
            ),
          ),
        ],
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Color(0xFF132435),
      ),
      height: 50,
      width: 280,
    );
  }
}

class ExpandableCardContainer extends StatefulWidget {
  final bool isExpanded;
  final Widget collapsedChild;
  final Widget expandedChild;

  const ExpandableCardContainer(
      {Key key, this.isExpanded, this.collapsedChild, this.expandedChild})
      : super(key: key);

  @override
  _ExpandableCardContainerState createState() =>
      _ExpandableCardContainerState();
}

class _ExpandableCardContainerState extends State<ExpandableCardContainer> {
  @override
  Widget build(BuildContext context) {
    return new AnimatedContainer(
      duration: new Duration(milliseconds: 200),
      curve: Curves.easeInOut,
      child: widget.isExpanded ? widget.expandedChild : widget.collapsedChild,
    );
  }
}

Answer 1

您应该使用ReorderableListView达到目的。这是指向文档的链接，以供参考... https://api.flutter.dev/flutter/material/ReorderableListView-class.html

如果仍有疑问，请随时发表评论。谢谢...