[英]flutter Dismissible widget variable dependency
Edit: Fixed it.. Look down 编辑:修复它。向下看
Old problem: 老问题:
I am experimenting with the Dismissible widget. 我正在试验Dismissible小部件。 I can successfully monitor the state of the direction, which is stored in directionVar.
我可以成功监视该方向的状态,该状态存储在directionVar中。 It outputs something like
DismissDirection.endToStart
它输出类似于
DismissDirection.endToStart
I want to use this information, to change the placement of the icon that I show. 我想使用此信息来更改显示的图标的位置。 When removing an item, the background is red, with an icon on the right to it.
删除项目时,背景为红色,右侧为图标。 Something in the style like Gmail.
Gmail之类的样式。
Widget build(BuildContext context) {
DismissDirection directionVar;
return ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Dismissible(
key: Key(products[index]['title']), //Should be unique.
onDismissed: (DismissDirection direction) {
directionVar = direction;
},
My issue is this part: 我的问题是这部分:
background: Container(
color: Colors.red,
padding: EdgeInsets.only(left: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.delete,
)
],
),
),);});}
I want this part to change dependent on the directionVar
value. 我希望此部分根据
directionVar
值进行更改。 The padding
should change dependent on the value of directionVar
, together with the mainAxisAlignment
. padding
应该根据directionVar
的值以及mainAxisAlignment
。
Something along these lines: 遵循以下原则:
if(directionVar == DismissDirection.endToStart){
} else if (directionVar == DismissDirection.startToEnd){
}
But I can't access the background
: and padding
property in these statements, since they are a property of the Dismissible
widget and can't be changed inside onDismissed(){}
但是我无法访问这些语句中的
background
:和padding
属性,因为它们是Dismissible
小部件的属性,并且无法在onDismissed(){}
更改
This seems like simple problem but can't seem to solve it. 这看似简单的问题,但似乎无法解决。
Edit: Fixed it.. Very easy.. Just added this: 编辑:修复它。。非常简单。
secondaryBackground: Container(
color: Colors.red,
padding: EdgeInsets.only(right: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Icon(
Icons.delete,
)
],
),
),
There are a few ways that you can achieve this. 有几种方法可以实现此目的。 For example, you can create a method that handles the direction dynamically and then update it accordingly in your widget tree.
例如,您可以创建一种方法来动态处理方向,然后在小部件树中相应地对其进行更新。 Something like
就像是
List<dynamic> _resolveDirection(DismissDirection direction) {
switch (direction) {
case DismissDirection.endToStart:
return [MainAxisAlignment.center, 20.0];
break;
case DismissDirection.startToEnd:
return [MainAxisAlignment.start, 10.0];
break;
case DismissDirection.vertical:
return [MainAxisAlignment.end, 5.0];
break;
// And so on...
default:
return [];
}
}
and then replace your tree with 然后用
background: Container(
color: Colors.red,
padding: _resolveDirection(directionVar)[1],
child: Row(
mainAxisAlignment: _resolveDirection(directionVar)[0],
children: <Widget>[
Icon(
Icons.delete,
)
],
),
),);});}
In the end, all you have to do everytime a swipe occurs, is just rebuild your tree with the direction updated 最后,每次滑动时您所要做的就是以更新的方向重建树
setState(() => directionVar = direction);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.