Je commence donc à apprendre Flutter et je voudrais utiliser une liste de glisser-déposer de conception de matériaux, tout comme celle vue sur le site Web des directives sur les matériaux.
Toutes les bibliothèques que j'ai essayées jusqu'à présent ressemblent à des ordures par rapport à cela. Existe-t-il une bonne bibliothèque pour cela qui me manque ou un widget Flutter natif?
Vérifiez knopp/flutter_reorderable_list . Il accomplit exactement cela. C'est vraiment fluide et il n'y a aucun problème de performance, étant capable de gérer des milliers d'éléments.
Cependant, sa mise en œuvre n'est pas aussi simple que les widgets de flottement habituels.
Si vous rencontrez des difficultés, je vous recommande d'utiliser un widget que j'ai créé pour porter flutter/ReorderableListView
s au knopp/ReorderableList
.
Ce widget le rend vraiment facile à utiliser, mais il n'offre pas la même flexibilité, et comme il fonctionne avec un children
List
, il n'est pas aussi évolutif que l'original.
Voici le code pour ReorderableListSimple et voici la démo .
Flutter lui-même fournit un (Material) ReorderableListView class .
Vous pouvez utiliser le widget de flottement natif, ReorderableListView
pour y parvenir, voici l'exemple de le faire.
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(() {});
},
),
);
}
J'ai essayé flutter_reorderable_list et dragable_flutter_list mais aucun d'entre eux n'a fonctionné correctement - il y a eu des artefacts indésirables pendant le glissement. J'ai donc essayé de faire ma propre solution:
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,
)
],
);
},
);
}
Je suppose que ce n'est pas la meilleure solution, et je vais peut-être la changer davantage, mais pour l'instant cela fonctionne assez bien
L'équipe Flutter a introduit le widget ReorderableListView .
ReorderableListView(
children: <Widget>[
for (var item in appState.menuButtons)
Text('data')
],
)