You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter可拖拽重排与可调整大小的GridView开发问题

Flutter 拖拽重排与大小调整 GridView 开发问题

我正在Flutter中开发一款支持元素拖拽重排与大小调整的GridView。目前已使用GridView组件,尝试通过Draggable、DragTarget实现拖拽功能,用GestureDetector实现调整大小功能,但无法同时启用这两项功能,遇到以下问题:

  • 拖拽功能与调整大小功能存在冲突,互相干扰;
  • 调整大小操作响应不一致、不可预测。

当前简化代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Rearrangeable GridView'),
        ),
        body: RearrangeableGridView(),
      ),
    );
  }
}

class RearrangeableGridView extends StatefulWidget {
  @override
  _RearrangeableGridViewState createState() => _RearrangeableGridViewState();
}

class _RearrangeableGridViewState extends State<RearrangeableGridView> {
  List<int> _items = List.generate(10, (index) => index);

  @override
  Widget build(BuildContext context) {
    return ReorderableListView(
      padding: EdgeInsets.all(8.0),
      children: _items
          .map((index) => Card(
                key: ValueKey(index),
                elevation: 2,
                margin: EdgeInsets.all(4.0),
                child: ListTile(
                  key: ValueKey(index),
                  title: Text('Item $index'),
                  leading: Icon(Icons.drag_handle),
                ),
              ))
          .toList(),
      onReorder: (oldIndex, newIndex) {
        setState(() {
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          final int item = _items.removeAt(oldIndex);
          _items.insert(newIndex, item);
        });
      },
    );
  }
}

预期效果

  • 用户可拖拽网格内元素进行重排;
  • 用户可通过捏合缩放等交互调整网格元素大小。

我已尝试多种库与方案,但未找到同时支持两项功能的明确解决方案,希望获得指导、示例或替代方案。Flutter版本:3.16.3。目标效果为网格元素可自由拖拽重排且支持大小调整的布局样式。

内容的提问来源于stack exchange,提问作者Muhammad Sherdil Tahir

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.04 10:24:59