本文用到的组件:
这是一个简单版仿微信的左滑删除的组件:
# 左滑删除组件
left_scroll_actions:^1.4.0
pub地址:
https://pub.dartlang.org/pack...
仓库地址:
https://github.com/mjl0602/le...
【新】iOS样式的按钮出现动画
使用CupertinoLeftScroll
替换LeftScroll
即可获取与iOS相同的按钮出现效果,即随着滑动,按钮从右侧逐渐从堆叠变为展开。
关联列表(1.3.0)
- 对于提供同一个
LeftScrollCloseTag
的LeftScroll组件,可以在一个打开时,关闭其他组件 - 想要关闭特定的行,只需使用以下代码
// 找到对应tag与key的row状态,改变状态即可
LeftScrollGlobalListener.instance.targetStatus(tag,key) = false;
关联列表(旧)(1.2.0新增,已废弃)
左滑列表,如果你打开一行,其他行会自动关闭
LeftScrollList.builder(
count: list.length,
builder: (ctx, index) => LeftScrollListItem(
key: list[index],
child: Container(
height: 60,
padding: EdgeInsets.only(left: 20),
color: Colors.white,
alignment: Alignment.centerLeft,
child: Text('(${list[index]})Scroll Left To Delete'),
),
buttons: [
LeftScrollItem(
text: 'delete',
color: Colors.red,
onTap: () {
print('delete');
if (list.contains(list[index])) {
list.remove(list[index]);
setState(() {});
}
},
),
],
onTap: () {
print('tap row');
list.add((Random().nextDouble() * 10000000 ~/ 1).toString());
setState(() {});
},
);
);
问题
在flutter上,使用仿微信样式的左滑删除组件时,如果这一行的背景色是透明的,就会出现如下问题:
透明的Row下可以看到删除和编辑按钮,我们就需要处理一下。
至于为啥要用透明背景色——因为Scaffold的背景色是渐变的……当时画设计图给自己挖的坑。
组件
封装很简单,把滑动进度和透明度挂钩,就可以了:
// 如果Row的背景必须是透明颜色的,就要做处理了:
class ExampleRow extends StatefulWidget {
final Function onTap;
final Function onEdit;
final Function onDelete;
const ExampleRow({
Key key,
this.onTap,
this.onDelete,
this.onEdit,
}) : super(key: key);
@override
_ExampleRowState createState() => _ExampleRowState();
}
class _ExampleRowState extends State<ExampleRow> {
double opa = 0;
@override
Widget build(BuildContext context) {
Widget myDeviceStatus = Icon(Icons.supervised_user_circle);
Widget body = Container(
padding: EdgeInsets.fromLTRB(12, 0, 0, 0),
height: 92,
width: double.infinity,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
height: 66,
width: 66,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(33),
),
child: Placeholder(),
),
),
Container(
width: 44,
height: double.infinity,
child: Opacity(
opacity: 1 - opa,
child: Center(
child: myDeviceStatus,
),
),
)
],
),
);
List<Widget> actions = [
Opacity(
opacity: opa,
child: MaterialButton(
child: Container(
color: Colors.white.withOpacity(0),
alignment: Alignment.center,
padding: EdgeInsets.all(20),
child: Icon(Icons.delete, color: Colors.red),
),
onTap: widget.onDelete,
),
),
Opacity(
opacity: opa,
child: MaterialButton(
child: Container(
color: Colors.white.withOpacity(0),
alignment: Alignment.center,
padding: EdgeInsets.all(20),
child: Icon(Icons.edit, color: Colors.blue),
),
onTap: widget.onDelete,
),
),
];
body = LeftScroll(
child: body,
buttonWidth: 70,
buttons: actions,
onTap: widget.onTap,
onScroll: (a) {
opa = a;
setState(() {});
print(a);
},
onSlideStarted: () {
// opa = 0;
setState(() {});
},
onSlideCompleted: () {
opa = 1;
setState(() {});
},
onSlideCanceled: () {
opa = 0;
setState(() {});
},
);
return body;
}
}
效果GIF
还可以,这个思路和UI效果都是可以接受的
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。