Flutter:使用网格拖放 [英] Flutter: Drag and drop with Grid

问题描述

我想创建一个小部件，您可以在其中添加多个具有不同大小的小部件，并可以使用拖放技术来更改它们的位置.类似于带有拖放功能的网格视图，您可以在其中水平和垂直更改位置.拖动选定的窗口小部件时，其他窗口小部件将四处移动以为其打开空间.

I want to create a widget where you can add multiple widgets with different sizes and you can change their position by using the drag and drop technique. Something like a grid view with drag and drop where you can change the position both horizontally and vertically. While you are dragging the selected widget, other widgets will move around to open up space for it.

有人建议从哪里开始，还是已经有一些例子可以实现我所寻找的东西?

Does anyone have any suggestion where to start or are there already some examples which are implementing what I am looking for?

推荐答案

尽管这可能无法回答您的问题，但是正在寻找简单拖放小部件的人们可以找到示例.

Although this may not answer your question but people who are looking for simple drag and drop widget, then here is the example.

请参阅我的第二个答案以获取更简单的方法

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Drag app"),
        ),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  double width = 100.0, height = 100.0;
  Offset position ;

  @override
  void initState() {
    super.initState();
    position = Offset(0.0, height - 20);
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          left: position.dx,
          top: position.dy - height + 20,
          child: Draggable(
            child: Container(
              width: width,
              height: height,
              color: Colors.blue,
              child: Center(child: Text("Drag", style: Theme.of(context).textTheme.headline,),),
            ),
            feedback: Container(
              child: Center(
                child: Text("Drag", style: Theme.of(context).textTheme.headline,),),
              color: Colors.blue[300],
              width: width,
              height: height,
            ),
            onDraggableCanceled: (Velocity velocity, Offset offset){
              setState(() => position = offset);
            },
          ),
        ),
      ],
    );
  }
}

这篇关于Flutter:使用网格拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！