如何隐藏ReorderableListView拖拽项背景色并解决边框问题

直接修改全局Theme的canvasColor会连带污染其他组件样式，导致出现不必要的边框。更精准的解决方案是利用ReorderableListView的proxyDecorator参数，自定义拖拽时的代理组件外观：

1. 移除外层包裹的Theme组件，避免全局样式干扰
2. 给ReorderableListView添加proxyDecorator，返回无背景、无边框的容器包裹原组件

修改后的完整代码如下：

Expanded(
  child: ReorderableListView(
    padding: const EdgeInsets.fromLTRB(16.0, 0.0, 16.0, 16.0),
    // 自定义拖拽代理样式
    proxyDecorator: (Widget child, int index, Animation<double> animation) {
      return Material(
        color: Colors.transparent, // 拖拽时背景设为透明
        child: child,
      );
    },
    children: <Widget>[
      for (final items in homeButtons)
        Card(
          key: ValueKey(items),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0)),
          child: Container(
            clipBehavior: Clip.antiAlias,
            alignment: Alignment.center,
            height: 50.0,
            width: double.infinity,
            decoration: BoxDecoration(
              gradient: const LinearGradient(
                colors: [
                  Color(0xFF3b474f),
                  Color(0xFF232b32),
                ],
                stops: [0, 1],
                begin: AlignmentDirectional(1, -1),
                end: AlignmentDirectional(-1, 1),
              ),
              borderRadius: BorderRadius.circular(10),
            ),
            child: ListTile(
              title: Text(
                '${items.toString().replaceAll('_', ' ')}',
                textAlign: TextAlign.center,
                style: GoogleFonts.outfit(
                  textStyle: const TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.w100,
                  ),
                ),
              ),
              leading: SvgPicture.asset(
                'assets/icons/$items.svg',
                color: Color(0xFFF0154B),
                height: 24.0,
                width: 24.0,
              ),
              trailing: Icon(
                Icons.navigate_next,
                color: Colors.white,
              ),
            ),
          ),
        ),
    ],
    onReorder: (oldIndex, newIndex) async {
      setState(() {
        if (newIndex > oldIndex) {
          newIndex -= 1;
        }
        final items = homeButtons.removeAt(oldIndex);
        homeButtons.insert(newIndex, items);
        box.remove(key);
        box.write(key, homeButtons);
      });
    },
  ),
),

原理说明 #

proxyDecorator是ReorderableListView专门用来定制拖拽过程中跟随手指移动的"影子"组件的回调。通过返回color: Colors.transparent的Material容器，既消除了默认的拖拽背景色，又完全保留原组件的样式，不会产生额外边框。

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