Flutter拖拽滚动容器插件drag_scroll_container的使用

特性

drag_scroll_container 是一个 Flutter 容器小部件，在拖放操作期间可以滚动。如果你正在创建自己的拖放容器，这可能会很有用。

演示

免责声明

所有 DragScrollContainer 的代码都是由 GPT Engineer 生成的。该项目是我实验和实践使用 GPT Engineer 的一部分。通过提示，我能够生成 DragScrollContainer 的所有代码，并部分完成了 ./example/lib/main.dart 的编码。我只对 DragScrollContainer 的代码进行了非常小的修改以使其编译，然后根据需要更改了 main.dart 文件中的示例。

使用方法

使用 DragScrollContainer 需要传递一个 ScrollController 和一个子组件。在下面的示例中，我们传递的是与 ListView 相同的 ScrollController：

DragScrollContainer(
  scrollController: scrollController1,
  child: ListView.builder(
    controller: scrollController1,
    itemCount: 100,
    itemBuilder: (context, index) => Center(child: DraggableBlock(index: index)),
  ),
)

更多信息

launch.json 已配置为运行 ./example/lib/main.dart。

示例代码

以下是一个完整的示例代码，展示了如何使用 DragScrollContainer 插件：

import 'package:drag_scroll_container/drag_scroll_container.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drag Scroll Container Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final ScrollController scrollController1 = ScrollController();
  final ScrollController scrollController2 = ScrollController();

  MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Drag Scroll Container Demo'),
      ),
      body: Column(
        children: [
          const Text("Group 1"),
          Expanded(
            flex: 1,
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 8.0),
              child: DragScrollContainer(
                scrollController: scrollController1,
                child: ListView.builder(
                  controller: scrollController1,
                  itemCount: 100,
                  itemBuilder: (context, index) => Center(child: DraggableBlock(index: index)),
                ),
              ),
            ),
          ),
          const Text("Group 2"),
          Expanded(
            flex: 1,
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 8.0),
              child: DragScrollContainer(
                scrollController: scrollController2,
                child: ListView.builder(
                  controller: scrollController2,
                  itemCount: 100,
                  itemBuilder: (context, index) => Center(child: DraggableBlock(index: index)),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class DraggableBlock extends StatelessWidget {
  final int index;

  const DraggableBlock({super.key, required this.index});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return LongPressDraggable(
      feedback: buildWidget(true),
      child: buildWidget(false),
    );
  }

  Widget buildWidget(bool isFeedback) {
    return Padding(
      padding: const EdgeInsets.all(1.0),
      child: Container(
        height: 100,
        width: 100,
        color: isFeedback ? Colors.lightBlueAccent : Colors.grey,
        child: Center(
          child: Text(
            'Block $index',
            style: const TextStyle(
              color: Colors.white,
              fontSize: 16,
            ),
          ),
        ),
      ),
    );
  }
}