删除从 ReorderableListView (Flutter) 拖动项目时出现的阴影

Question

在我的 TODO 应用程序中，我使用ReorderableListView创建了可拖放的ListaItem元素。 问题是我的ListaItem有圆形边框，当我尝试拖动它们时会出现一个矩形（和丑陋的）阴影。

我的目标是消除这个恼人的阴影。

我的ListaItem应该是这样的：

这里是ListaItem代码：

 @override
 Widget build(BuildContext context) {
   return 
       Container(
         margin: EdgeInsets.only(left:10.0, right: 10.0, top: 7,bottom: 7),
         decoration: BoxDecoration(
           boxShadow: [BoxShadow(
               color: Color.fromRGBO(50, 50, 50, 0.21),
               offset: Offset(2, 2),
               blurRadius: 10.0
             )],
             borderRadius: BorderRadius.all(Radius.circular(100.0))
         ),
         child: ElevatedButton(
           onPressed: () {
             setState(() {
               widget.checkValue = !widget.checkValue;
             });
           }, 
           style: ElevatedButton.styleFrom(
             primary: Colors.white,
             onPrimary: Color.fromARGB(0, 59, 59, 59),
             shape: StadiumBorder(),             
           ),
           child: AnimatedContainer(
             duration: Duration(milliseconds: 100),
             height: 55,
             padding: EdgeInsets.only(left: 10, right: 2),
             child: Row(
               crossAxisAlignment: CrossAxisAlignment.center,
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
                 Text(
                   widget.product,
                   style: TextStyle(
                     color: widget.checkValue ? Color.fromARGB(120, 37, 37, 37) : Color.fromARGB(200, 37, 37, 37),
                     fontSize: 20,
                     fontWeight: FontWeight.w300,
                     decoration: widget.checkValue ? TextDecoration.lineThrough : TextDecoration.none
                     ),
                   ),
                 newCheck(value: widget.checkValue)//it's a styled checkbox
               ],
             ),
           )
         ),
       );
     
 }
}

但是，正如我之前所说，拖动一个项目会导致一个丑陋的阴影，像这样：

这里是ReorderableListView代码：

  @override
  Widget build(BuildContext context) {
    var Items = new List<Item>.generate(10, (i) => Item(i, i.toString()));
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          color: Colors.transparent,
          child: 
            Expanded(
              child: ReorderableListView(
              padding: EdgeInsets.only(top:20),
              onReorder: ((oldIndex, newIndex) {
                
              }),
              children: [
                for(int i = 0; i < Items.length; i++)
                  ListaItem(checkValue: Items[i].state, product: Items[i].title,key: Key(i.toString()),)
              ],
            )
          )
        ),
      ),
       // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

提前致谢！！

Answer 1

您必须使用 ReorderableListView 的proxyDecorator属性来覆盖ReorderableListView选择的元素的设计。

class _TestState extends State<Test> {


 
  Widget proxyDecorator(Widget child, int index, Animation<double> animation) {
    return AnimatedBuilder(
      animation: animation,
      builder: (BuildContext context, Widget? child) {
        return Material(
          elevation: 0,
          color: Colors.transparent,
          child: child,
        );
      },
      child: child,
    );
  }

  List<String> vars = [];

  @override
  Widget build(BuildContext context) {
    return ReorderableListView.builder(
       proxyDecorator: proxyDecorator,
       itemCount: vars.length,
       onReorder: (oldIndex, newIndex) {
          if (oldIndex < newIndex) {
             newIndex -= 1;
          }
          vars.insert(newIndex, vars.removeAt(oldIndex));
       },
       itemBuilder: (context, index) {
          return Padding(
             key: Key(const Uuid().v1()),
             padding: const EdgeInsets.only(bottom: minPadding),
             child: CustomListItemWidget(someVar: vars[index]),
           );
       }
  }