Flutter Web中ReorderableListView拖拽时内边距跳动问题求助

在Chrome浏览器中使用ReorderableListView拖拽元素时，Align组件会导致内边距跳动，移除Align后问题消失，但需要保留Card不拉伸的效果和ListTile的hoverColor，以下是几种可行的替代方案：

方案1：用Row包裹Card，控制主轴尺寸和对齐 #

将原来的Align替换为Row，通过mainAxisSize: MainAxisSize.min让Card仅占用自身宽度，再用crossAxisAlignment: CrossAxisAlignment.center保持垂直居中，完美替代Align的左对齐且不拉伸效果：

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: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Card(
                    margin: EdgeInsets.zero,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(text),
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

方案2：用Container的alignment属性替代Align #

把Align换成Container，设置alignment: Alignment.centerLeft，同样能实现Card左对齐且不拉伸的效果，同时避免拖拽时的布局冲突：

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: Container(
                alignment: Alignment.centerLeft,
                child: Card(
                  margin: EdgeInsets.zero,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(text),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

方案3：使用Wrap组件 #

Wrap组件默认会让子组件仅占用自身宽度，且可以通过alignment控制对齐，也能替代Align的效果：

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: Wrap(
                alignment: WrapAlignment.start,
                children: [
                  Card(
                    margin: EdgeInsets.zero,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(text),
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Arturrito