2025-06-09
Flutter
00
请注意,本文编写于 43 天前,最后修改于 43 天前,其中某些信息可能已经过时。

目录

1.实现点击其他位置自动关闭效果
2.实现类似手风琴的自动关闭效果

flutter_slidable 插件用来实现可滑动列表项,默认滑动项展示后是不会自动关闭的。

  1. 实现点击其他位置自动关闭效果
  2. 实现类似手风琴的自动关闭效果

动画.gif

1.实现点击其他位置自动关闭效果

将子列表放入SlidableAutoCloseBehavio()小部件中即可

dart
SlidableAutoCloseBehavior( child: ListView.builder( itemBuilder: (BuildContext context, int index) { return Slidable( key: ValueKey("$index"), endActionPane: ActionPane( extentRatio: 0.2, motion: const DrawerMotion(), children: [ SlidableAction( onPressed: (v) {}, backgroundColor: const Color(0xFFFE4A49), foregroundColor: Colors.white, icon: Icons.delete, label: '删除', ), ], ), child: Text("item$index"), ); }, itemCount: courseState.courseList.length, ), )

2.实现类似手风琴的自动关闭效果

Slidable设置groupTag为一组即可

dart
SlidableAutoCloseBehavior( child: ListView.builder( itemBuilder: (BuildContext context, int index) { return Slidable( key: ValueKey("$index"), groupTag: "a", // 设置为同一组 endActionPane: ActionPane( extentRatio: 0.2, motion: const DrawerMotion(), children: [ SlidableAction( onPressed: (v) {}, backgroundColor: const Color(0xFFFE4A49), foregroundColor: Colors.white, icon: Icons.delete, label: '删除', ), ], ), child: Text("item$index"), ); }, itemCount: courseState.courseList.length, ), )

本文作者:哈希喵

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!