创建一个flutter的左划重命名,右划隐藏的功能

首先定义一下参数,以及左划右划的方法

Dart 复制代码
double deleteButtonPosition = -120;
  double renameButtonPosition = -120;

  void _onHorizontalDragUpdate(DragUpdateDetails details) {
    setState(() {
      if (details.delta.dx < 0) {
        // 左滑
        deleteButtonPosition = 0; // 显示删除按钮
        renameButtonPosition = 80; // 显示重命名按钮
      } else if (details.delta.dx > 0) {
        // 右滑
        deleteButtonPosition = -120; // 隐藏删除按钮
        renameButtonPosition = -160; // 隐藏重命名按钮
      }
    });
  }

然后再在Widget中加入布局以及方法调用

Dart 复制代码
onHorizontalDragUpdate: _onHorizontalDragUpdate,


AnimatedPositioned(
              duration: const Duration(milliseconds: 200),
              right: deleteButtonPosition,
              child: InkWell(
                onTap: () {
                  _showRenameDialog(context, widget.onRename, widget.index);
                },
                child: Container(
                  height: 100,
                  width: 100,
                  // color: Color.fromARGB(255, 106, 106, 106), // 添加背景颜色
                  alignment: Alignment.center,
                  decoration: const BoxDecoration(
                    color: Color.fromARGB(255, 106, 106, 106), // 添加背景颜色
                    borderRadius: BorderRadius.only(
                      topRight: Radius.circular(10),
                      bottomRight: Radius.circular(10),
                    ),
                  ),
                  child: const Text(
                    'Rename',
                    style: TextStyle(color: Colors.white, fontSize: 16),
                  ),
                ),
              ),
            ),
相关推荐
云诗卡达1 天前
Flutter安卓APP接入极光推送和本地通知
android·flutter
南村群童欺我老无力.1 天前
Flutter应用鸿蒙迁移实战:性能优化与渐进式迁移指南
javascript·flutter·ci/cd·华为·性能优化·typescript·harmonyos
LawrenceLan1 天前
Flutter 零基础入门(十二):枚举(enum)与状态管理的第一步
开发语言·前端·flutter·dart
程序员老刘·1 天前
重拾Eval能力:D4rt为Flutter注入AI进化基因
人工智能·flutter·跨平台开发·客户端开发
kirk_wang1 天前
Flutter艺术探索-Flutter响应式设计:MediaQuery与LayoutBuilder
flutter·移动开发·flutter教程·移动开发教程
SoaringHeart1 天前
Flutter最佳实践:路由弹窗终极版NSlidePopupRoute
前端·flutter
kirk_wang1 天前
Flutter艺术探索-Flutter自定义组件:组合与封装技巧
flutter·移动开发·flutter教程·移动开发教程
消失的旧时光-19431 天前
BLoC vs Riverpod:命令式系统 与 声明式系统的两条架构路线
flutter·架构
奋斗的小青年!!1 天前
Flutter跨平台开发适配OpenHarmony:下拉刷新组件的实战优化与深度解析
flutter·harmonyos·鸿蒙
摘星编程1 天前
Flutter for OpenHarmony 实战:CustomScrollView 自定义滚动视图详解
android·javascript·flutter