it-swarm.dev

Flutter Sortable Drag & Drop ListView

Flutter를 배우기 시작했고 머티리얼 가이드 라인 웹 사이트에서 볼 수있는 것과 같은 머티리얼 디자인 드래그 앤 드롭 목록을 사용하고 싶습니다.

https://storage.googleapis.com/spec-Host-backup/mio-design%2Fassets%2F1dtprsH4jZ2nOnjBCJeJXd7n4U-jmWyas%2F03-list-reorder.mp4

지금까지 시도한 모든 라이브러리는 그와 비교하여 쓰레기처럼 보입니다. 내가 놓친 좋은 라이브러리 또는 기본 Flutter 위젯이 있습니까?

8
Jared

knopp/flutter_reorderable_list 를 확인하십시오. 그것은 단지 그것을 달성합니다. 정말 매끄럽고 성능 문제가 없어 수천 개의 항목을 처리 할 수 ​​있습니다.

그러나 일반적인 flutter 위젯처럼 구현이 쉽지 않습니다.

이 문제로 어려움을 겪고 있다면 flutter/ReorderableListViews to knopp/ReorderableList.

이 위젯을 사용하면 실제로 사용하기가 쉽지만 동일한 유연성을 제공하지는 않으며 childrenList와 작동하므로 원래만큼 확장 할 수 없습니다.

다음은 ReorderableListSimple의 코드 이며 이것은 데모 입니다.

4
Feu

Flutter 자체는 (Material) ReorderableListView class 를 제공합니다.

7
jamesdlin

enter image description here

네이티브 플러터 위젯 ReorderableListView을 사용하여이를 달성 할 수 있습니다. 다음은이를 수행하는 예입니다.

List<String> _list = ["Apple", "Ball", "Cat", "Dog", "Elephant"];

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: ReorderableListView(
      children: _list.map((item) => ListTile(key: Key("${item}"), title: Text("${item}"), trailing: Icon(Icons.menu),)).toList(),
      onReorder: (int start, int current) {
        // dragging from top to bottom
        if (start < current) {
          int end = current - 1;
          String startItem = _list[start];
          int i = 0;
          int local = start;
          do {
            _list[local] = _list[++local];
            i++;
          } while (i < end - start);
          _list[end] = startItem;
        }
        // dragging from bottom to top
        else if (start > current) {
          String startItem = _list[start];
          for (int i = start; i > current; i--) {
            _list[i] = _list[i - 1];
          }
          _list[current] = startItem;
        }
        setState(() {});
      },
    ),
  );
}
5
CopsOnRoad

flutter_reorderable_listdragable_flutter_list 을 시도했지만 제대로 작동하지 않았습니다. 드래그하는 동안 원치 않는 아티팩트가있었습니다. 그래서 나는 자신의 해결책을 만들려고 노력했다.

ListView.builder(
  itemBuilder: (context, index) => buildRow(index),
  itemCount: trackList.length,
),

Widget buildRow(int index) {
  final track = trackList[index];
  ListTile tile = ListTile(
    title: Text('${track.getName()}'),
  );
  Draggable draggable = LongPressDraggable<Track>(
    data: track,
    axis: Axis.vertical,
    maxSimultaneousDrags: 1,
    child: tile,
    childWhenDragging: Opacity(
      opacity: 0.5,
      child: tile,
    ),
    feedback: Material(
      child: ConstrainedBox(
        constraints:
            BoxConstraints(maxWidth: MediaQuery.of(context).size.width),
        child: tile,
      ),
      elevation: 4.0,
    ),
  );

  return DragTarget<Track>(
    onWillAccept: (track) {
      return trackList.indexOf(track) != index;
    },
    onAccept: (track) {
      setState(() {
        int currentIndex = trackList.indexOf(track);
        trackList.remove(track);
        trackList.insert(currentIndex > index ? index : index - 1, track);
      });
    },
    builder: (BuildContext context, List<Track> candidateData,
        List<dynamic> rejectedData) {
      return Column(
        children: <Widget>[
          AnimatedSize(
            duration: Duration(milliseconds: 100),
            vsync: this,
            child: candidateData.isEmpty
                ? Container()
                : Opacity(
                    opacity: 0.0,
                    child: tile,
                  ),
          ),
          Card(
            child: candidateData.isEmpty ? draggable : tile,
          )
        ],
      );
    },
  );
}

나는 이것이 최선의 해결책은 아니라고 생각하며, 아마도 그것을 더 바꿀 것입니다. 그러나 지금은 꽤 잘 작동합니다.

4
Andrey Turkovsky

Flutter 팀은 ReorderableListView 위젯을 도입했습니다.

ReorderableListView(
      children: <Widget>[
        for (var item in appState.menuButtons) 
        Text('data')              

      ],
    )
0
Benjith Kizhisseri