Flutter ReorderableListView --在拖动时调整项目大小并相应地调整其他项目的布局

vecaoik1  于 2023-08-07  发布在  Flutter
关注(0)|答案(2)|浏览(204)

我有一个ReorderableListView,我使用proxyDecorator来检测一个项目何时开始被拖动,然后调整它的高度,以及ListView中实际存在的底层Widget的高度(因为我假设proxyDecorator返回的Widget只是用来显示正在拖动的内容)。问题是,被拖动的项目被拖动的列表中的“空格”仍然是原来的大小,而不是反映了Widget的新大小。一旦放置了拖动的项目,如果我禁用代码以将其返回到原始大小,则列表视图的其余部分将聚集起来以反映新的大小。但我希望这一切都发生 * 只要拖行一开始。* 这可能吗?我尝试在proxyDecorator中使用setState调用,但这会导致在重建期间触发重建时出错。

xpszyzbs

xpszyzbs1#

我不知道你说的proxy decorator是什么意思,但是如果你只是想在拖动一个项目的时候调整它的大小,这是可以做到的。


的数据
显然,这只是一个快速演示,许多边缘案例没有测试。但是如果你感兴趣的话,这里是上面演示中使用的完整源代码:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final colors = [
    Colors.red,
    Colors.blue,
    Colors.green,
    Colors.orange,
    Colors.purple,
    Colors.pink,
    Colors.cyan
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ReorderableListView'),
      ),
      body: ReorderableListView(
        children: colors
            .map((color) => Box(
                  key: ValueKey(color),
                  color: color,
                ))
            .toList(),
        onReorder: (int oldIndex, int newIndex) {
          if (newIndex > oldIndex) newIndex--;
          setState(() {
            final color = colors.removeAt(oldIndex);
            colors.insert(newIndex, color);
          });
        },
      ),
    );
  }
}

class Box extends StatefulWidget {
  final Color color;

  const Box({Key? key, required this.color}) : super(key: key);

  @override
  _BoxState createState() => _BoxState();
}

class _BoxState extends State<Box> {
  bool _big = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => setState(() => _big = true),
      onTapCancel: () => setState(() => _big = false),
      child: AnimatedContainer(
        duration: Duration(milliseconds: 200),
        height: _big ? 100 : 50,
        margin: EdgeInsets.all(4.0),
        color: widget.color,
      ),
    );
  }
}

字符串

dgsult0t

dgsult0t2#

您可以使用ReorderableListViewproxyDecorator成员顺利实现它。验证码:

proxyDecorator: (child, index, animation) {
  return Material(
    color: Colors.transparent,
    child: ScaleTransition(
      scale: animation.drive(
        Tween<double>(begin: 1, end: 1.1).chain(
          CurveTween(curve: Curves.linear),
        ),
      ),
      child: child,
    ),
  );
},

字符串
如果要在拖动开始时缩小小部件而不是放大小部件,则应该将end值更改为较小的值,例如0.8

相关问题