处于抖动状态的GridView中的可拖动元素位置错误

Question

大家好，我正在尝试使用图标的GridView，我想把这些元素拖到GridView之外的另一个小部件中。一旦我开始拖拽一个图标，在开始拖拽点和反馈小部件之间就会有一个间隙。我也试过设置feedbackOffset，但它不起作用。

我准备了一个示例代码作为POC

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: IconsCollector(),
);
}
}
// import 'package:flutter_svg_provider/flutter_svg_provider.dart';
class IconsCollector extends StatefulWidget {
const IconsCollector({
Key? key,
}) : super(key: key);
@override
_IconsCollectorState createState() => _IconsCollectorState();
}
class _IconsCollectorState extends State<IconsCollector> {
List<Widget> out = [];
List iconlist = [
Icon(Icons.ac_unit),
Icon(Icons.ac_unit),
Icon(Icons.ac_unit),
Icon(Icons.ac_unit),
Icon(Icons.ac_unit),
];
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
var screensize = MediaQuery.of(context).size;
return 
GridView.builder(
scrollDirection: Axis.vertical,
itemCount: iconlist.length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 7,
),
itemBuilder: (BuildContext context, int index) {
return Draggable(
hitTestBehavior: HitTestBehavior.translucent,
feedback:  Container(
width: screensize.width * 0.1,
height: screensize.height * 0.55,
margin: EdgeInsets.all(12),
decoration: new BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey,
offset: Offset(1.1, 1.1),
blurRadius: 10.0,
),
],
color: Colors.white,
border: Border.all(width: 5),
// borderRadius: new BorderRadius.all(Radius.circular(30.0)),
shape: BoxShape.circle,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(30.0),
child: iconlist[index])),
data: index,
child: Container(
width: screensize.width * 0.1,
height: screensize.height * 0.55,
margin: EdgeInsets.all(12),
decoration: new BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey,
offset: Offset(1.1, 1.1),
blurRadius: 10.0,
),
],
color: Colors.white,
border: Border.all(width: 5),
// borderRadius: new BorderRadius.all(Radius.circular(30.0)),
shape: BoxShape.circle,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(30.0),
child: iconlist[index])));
});


}
}

谁知道怎么解决这个问题?我不能使用drag_and_drop_gridview，因为我想把图标拖出GridView。

我的颤振医生输出:

[✓] Flutter (Channel stable, 2.2.3, on Linux, locale en_US.utf8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.58.2)
[✓] Connected device (3 available)
• No issues found!

我附上了模拟器的屏幕截图。在真正的设备上也会发生同样的事情。注意鼠标指针和拖动的图标之间的间隙谢谢大家的建议!

Answer 1

发生这种情况是因为在反馈中你的容器尺寸太大并且你使用透明背景进行剪切这里我修复了它，

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: IconsCollector(),
);
}
}
// import 'package:flutter_svg_provider/flutter_svg_provider.dart';
class IconsCollector extends StatefulWidget {
const IconsCollector({
Key? key,
}) : super(key: key);
@override
_IconsCollectorState createState() => _IconsCollectorState();
}
class _IconsCollectorState extends State<IconsCollector> {
List<Widget> out = [];
List iconlist = [
Icon(Icons.ac_unit),
Icon(Icons.ac_unit),
Icon(Icons.ac_unit),
Icon(Icons.ac_unit),
Icon(Icons.ac_unit),
];
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
var screensize = MediaQuery.of(context).size;
return GridView.builder(
scrollDirection: Axis.vertical,
itemCount: iconlist.length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 7,
),
itemBuilder: (BuildContext context, int index) {
return Draggable(
hitTestBehavior: HitTestBehavior.translucent,
feedback: Container(
height:120,
width:120,
decoration: new BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey,
offset: Offset(1.1, 1.1),
blurRadius: 10.0,
),
],
color: Colors.white,
border: Border.all(width: 5),
shape: BoxShape.circle,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(30.0),
child: iconlist[index],
),
),
data: index,
child: Container(
width: screensize.width * 0.1,
height: screensize.height * 0.55,
margin: EdgeInsets.all(12),
decoration: new BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey,
offset: Offset(1.1, 1.1),
blurRadius: 10.0,
),
],
color: Colors.white,
border: Border.all(width: 5),
shape: BoxShape.circle,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(30.0),
child: iconlist[index],
),
),
);
});
}
}