- 👋 Hi, I’m @baoolong
- 👀 I’m interested in ...
- 🌱 I’m currently learning ...
- 💞️ I’m looking to collaborate on ...
- 📫 How to reach me ...
baoolong / dragablegridview Goto Github PK
View Code? Open in Web Editor NEWLicense: Apache License 2.0
License: Apache License 2.0
deleteIcon
can be a widget which makes user can customize with icon or other widget, but not only Image.
final Image deleteIcon
-> final Widget deleteIcon
My GridView returns a Stateless widget, how to extend DragAbleGridViewBin?
GridView.builder(
shrinkWrap: true,
itemCount: productController.products.length,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
crossAxisSpacing: 3.0,
mainAxisSpacing: 3.0,
childAspectRatio: childAspectRatio,
),
itemBuilder: (context, index){
return ProductTileAdmin(
product: productController.products[index],
index: index
);
},
),
class ProductTileAdmin extends StatelessWidget {
final Product product;
final int index;
ProductTileAdmin({this.product, this.index});
@override
Widget build(BuildContext context) {
return Container(
child: Stack(
children: [
InkWell(
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)
),
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
CustomTitle(
text: product.name,
fontSize: 16,
),
CustomDesc(
text: product.desc,
fontSize: 14,
),
CustomPrice(
text: formatPrice(product.price),
fontSize: 16,
)
],
),
),
SizedBox(width: 10),
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Image.network(
product.image,
fit: BoxFit.fill,
width: 120,
),
),
],
),
),
),
onTap: (){
Get.dialog(
EditProductDialog(index),
barrierDismissible: true,
);
},
onLongPress: (){
Get.dialog(RemoveProductDialog(index, product));
},
),
// BOTAO EXCLUIR
IconButton(
icon: Icon(Icons.close),
onPressed: (){
},
)
],
),
);
}
}
就是有点像ios的touch assistant的widget.
I try to set a width/height for the draggable tiles (to make it a 100x100 square tile) and the result is that all is overlapped.
I was assuming tiles will keep padding and no overlap
Great library.
Is it currently possible to allow a "shaking" effect as the iPhone dashboard screen ?
My objetive is to use your library to mimic iPhone screen.
您好,我需要每次拖动之后,对 Item 的新排序做记录,但是并没有找到监听拖动的 API,可以加上么?
Hi there!
When this plugin migrate with images choosing, it seems that then List<ItemBin>
updated, the GridView didn't update, which cause _initItemPositions
won't triggered. And drag item would failed because positions didn't update.
Hope this can be solve~
作者你好~
这个插件在图片选择应用中,当ItemBin的List被更新时,GridView没有被更新,导致_initItemPositions
没有被触发,List的索引没有更新到数据中,此时拖动会造成数组越界(因为原数组为空)。
希望这个问题可以解决~
在模拟器中工作但在实际设备上不起作用
当child 数量过多时拖动的时候同时触发父容器的滚动事件,造成无法拖动
My code like that but photos not showing ?
StreamSubscription subscription;
List<ItemBin> _itemBins = List();
var editSwitchController = EditSwitchController();
@override
void initState() {
super.initState();
subscription = Firestore.instance
.collection('user')
.document(widget.firebaseUser.uid)
.snapshots()
.listen((DocumentSnapshot snapshot) {
List.from(snapshot.data['photos']).forEach((i) {
_itemBins.add(ItemBin(i));
});
});
}
Can you please develop the documentation with more samples or animated gif to understand how to use the lib
class AdCard extends StatefulWidget {
AdCard(this.ad);
final Pic ad;
_AdCardState createState() => _AdCardState(ad);
}
class _AdCardState extends State {
//to keep things readable
Pic _ad;
_AdCardState(this._ad);
void initState() {
super.initState();
getImage().then((val) => setState((){
_ad.image = val;
_image = val;
}));
}
Image _image = Image.asset('assets/images/loading.gif');
Future getImage() async {
if (_ad.image != null) {
return _ad.image;
} else {
return Image.memory(await http.readBytes(_ad.imageUrl));
}
}
@OverRide
Widget build(BuildContext context) {
return Card(
semanticContainer: false,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
_image,
],
),
);
}
}
class Pic {
final String imageUrl;
Image image;
Pic(this.imageUrl);
Pic.fromJson(Map<String, dynamic> json)
: imageUrl = json['imageUrl'];
Map<String, dynamic> toJson() =>
{
'imageUrl': imageUrl
};
}
class DragAbleGridViewDemo extends StatefulWidget{
@OverRide
State createState() {
return new DragAbleGridViewDemoState();
}
}
class ItemBin extends DragAbleGridViewBin{
ItemBin( this.adCard);
String data;
AdCard adCard;
@OverRide
String toString() {
return 'ItemBin{data: $data, dragPointX: $dragPointX, dragPointY: $dragPointY, lastTimePositionX: $lastTimePositionX, lastTimePositionY: $lastTimePositionY, containerKey: $containerKey, containerKeyChild: $containerKeyChild, isLongPress: $isLongPress, dragAble: $dragAble}';
}
}
class DragAbleGridViewDemoState extends State{
List itemBins=new List();
String actionTxtEdit="编辑";
String actionTxtComplete="完成";
String actionTxt;
var editSwitchController=EditSwitchController();
bool _isLoaded = false;
Future<List> fetchPics() async {
//the link you want to data from, goes inside get
final response = await http
.get('https://blasanka.github.io/watch-ads/lib/data/ads.json');
if (response.statusCode == 200) {
var abcd = json.decode(response.body);
final List parsedList = json.decode(response
.body); //assuming this json returns an array of signupresponse objects
List<Pic> list = parsedList.map((val) => Pic.fromJson(val)).toList();
return list;
}
return [];
}
@OverRide
void initState() {
super.initState();
actionTxt=actionTxtEdit;
fetchPics().then((val) => setState(() {
val.forEach((pic){
itemBins.add(ItemBin(AdCard(pic)));
});
_isLoaded = true;
}));
}
@OverRide
Widget build(BuildContext context) {
if(_isLoaded) {
return new Scaffold(
appBar: new AppBar(
title: new Text("可拖拽GridView"),
actions: [
new Center(
child: new GestureDetector(
child: new Container(
child: new Text(
actionTxt, style: TextStyle(fontSize: 19.0),),
margin: EdgeInsets.only(right: 12),
),
onTap: () {
changeActionState();
editSwitchController.editStateChanged();
},
)
)
],
),
body: new DragAbleGridView(
// decoration: new BoxDecoration(
// borderRadius: BorderRadius.all(new Radius.circular(3.0)),
// border: new Border.all(color: Colors.blue),
// ),
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
crossAxisCount: 2,
deleteIconName: "assets/images/icon_cancel.png",
deleteIconMarginTopAndRight: 6.0,
itemPadding: EdgeInsets.fromLTRB(8.0, 5.0, 8.0, 5.0),
childAspectRatio:1.8,
itemBins: itemBins,
editSwitchController: editSwitchController,
child: (int position) {
return itemBins[position].adCard;
},
editChangeListener: () {
changeActionState();
},
),
);
}else {
return Center(
child:
new CircularProgressIndicator());
}
}
void changeActionState(){
if(actionTxt==actionTxtEdit){
setState(() {
actionTxt=actionTxtComplete;
});
}else{
setState(() {
actionTxt=actionTxtEdit;
});
}
}
}
Question - Is there a way to show a placeholder to add an item after deleting an Item?
Any help is much appreciated.
For example: (for a Grid size of 3 x 3)
Step 1 - Delete Position - 7
Step 2 - Item at position 8 swaps to position 7 (Already works that way)
Step 3 - Item 8 now shows a placeholder to add new items.
有拖拽效果
但是拖拽任何一个标签移动后 其他标签不会改变位置 也不会有替换位置的效果
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.