[英]How to reorder a GridView in Flutter?
我做了一個GridView
,我可以通過 ontap 顯示網格項目。 通過雙擊。 我可以刪除一個網格。 現在我想添加可重新排序的屬性。
這是我的代碼:
//import 'dart:html';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
int treenumber = 7;
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "Garden",
home: new Home(),
theme: new ThemeData(primaryColor: Colors.deepOrange),
);
}
}
class Home extends StatefulWidget {
_Homesatate createState() => new _Homesatate();
}
class Tree {
String name;
bool visible;
Tree(this.name, this.visible);
}
class _Homesatate extends State<Home> {
var trees = [
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true),
Tree('mango', true),
Tree('apple', true)
];
@override
Widget build(BuildContext context) {
var gridview = new GridView.builder(
itemCount: trees.length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: treenumber),
itemBuilder: (BuildContext context, int index) {
return new GestureDetector(
child: new Visibility(
visible: trees[index].visible,
child: new Card(
elevation: 2.0,
child: new Container(
alignment: Alignment.center,
margin: new EdgeInsets.all(2.0),
child: new Text(trees[index].name),
),
),
),
onTap: () {
showDialog(
builder: (context) => new CupertinoAlertDialog(
title: new Column(
children: <Widget>[
new Text("Tree"),
new Icon(
Icons.favorite,
color: Colors.red,
)
],
),
content: new Text(trees[index].name),
actions: <Widget>[
new FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: new Text("Ok"))
],
),
barrierDismissible: false,
context: context);
},
onDoubleTap: () => setState(() {
trees[index].visible = !trees[index].visible;
}),
);
},
);
return new Scaffold(
appBar: new AppBar(
title: new Text("Garden"),
),
body: gridview,
);
}
}
void main(List<String> args) {
runApp(MyApp());
}
通過長按網格,我可以在任何地方替換它。 將重新排序其他網格。
我嘗試了幾種方法。 但是,這不包括我的 ontap 和 doubletap 功能。
如何保留這些屬性並且還想添加可重新排序的網格?
你在找這個嗎, drag_and_drop_gridview
_animals = ['cat','dog','kitten','puppy']
DragAndDropGridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3 / 4.5,
),
padding: EdgeInsets.all(20),
itemBuilder: (context, index) => Card(
elevation: 2,
child: Text(_animals[index]),
),
),
itemCount: _animals.length,
onWillAccept: (oldIndex, newIndex) {
// Implement you own logic
// Example reject the reorder if the moving item's destination value is cat"
if (_animals[newIndex] == "cat"){
return false;
}
return true, // If you want to accept the child return true or else return false
},
onReorder: (oldIndex, newIndex) {
_temp = _animals[newIndex];
_animals[newIndex] = _animals[oldIndex];
_animals[oldIndex] = _temp;
setState(() {});
},
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.