在我的 TODO 应用程序中,我使用
ListaItem
创建了可拖动和可放置的 ReorderableListView
元素。问题是我的 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
],
),
)
),
);
}
}
但是,正如我之前所说,拖动 Item 会产生丑陋的阴影,如下所示:
这里是
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.
);
}
}
提前致谢!
您必须使用
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]),
);
}
}
尝试返回为:
proxyDecorator: (child, index, animation) => child