![](/img/trans.png)
[英]Flutter ReorderableListView - dragged Flexible item grows to screen size when dragged
[英]Removing the shadow that appears when dragging an item from a ReorderableListView (Flutter)
在我的 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.
);
}
}
提前致謝!!
您必須使用 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]),
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.