Flutter Web - ReorderableListView 中拖动时的填充更改

Question

当我开始拖动列表元素时，我遇到了跳跃填充的问题。在 Flutter Web（Chrome 浏览器）上测试。

最小可重现示例：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: ReorderableListView(
        onReorder: (oldIndex, newIndex) {},
        children: const [
          ListRow(key: ValueKey('0'), text: '000000'),
          ListRow(key: ValueKey('1'), text: '111111'),
          ListRow(key: ValueKey('2'), text: '222222'),
        ],
      )),
    );
  }
}

class ListRow extends StatelessWidget {
  const ListRow({super.key, required this.text});

  final String text;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: ListTile(
        hoverColor: Colors.blue,
        onTap: () {},
        title: Row(
          children: [
            const Expanded(
              flex: 2,
              child: Text('HelloWorld'),
            ),
            Expanded(
                flex: 4,
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Card(
                    margin: EdgeInsets.zero,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(text),
                    ),
                  ),
                ))
          ],
        ),
      ),
    );
  }
}

我认为原因是对齐小部件。当我删除它时，一切都正常。但我想保留它，这样卡就不会拉伸。您知道有什么解决方法可以在没有对齐小部件的情况下保持这种外观吗？
另一个解决方案是退出 ListTile，但我需要它作为悬停颜色。

Answer 1

找到答案了。最简单的解决方案是用 InkWell 小部件替换 ListTile。我们失去了一些有用的道具（例如前导和尾随），但我们保留了原来的外观。