创建一个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),
                  ),
                ),
              ),
            ),
相关推荐
Lanren的编程日记1 小时前
Flutter 鸿蒙应用智能推荐功能实战:协同过滤+混合推荐算法,打造个性化内容体验
flutter·华为·harmonyos·推荐算法
程序员老刘8 小时前
Flutter版本选择指南:3.41.7进入稳态,生产环境升级窗口开启 | 2026年4月
flutter·客户端
jiejiejiejie_12 小时前
Flutter for OpenHarmony 视频播放与本地身份验证萌系实战总结
flutter·华为·音视频·harmonyos
liulian091612 小时前
【Flutter for OpenHarmony 第三方库】Flutter for OpenHarmony 第三方社交登录功能适配与实现指南
flutter·华为·学习方法·harmonyos
liulian091613 小时前
【Flutter for OpenHarmony第三方库】Flutter for OpenHarmony 骨架屏实现与用户加载体验优化指南
flutter·华为·学习方法·harmonyos
Lanren的编程日记13 小时前
Flutter 鸿蒙应用无障碍功能实战:语义化标签+屏幕阅读器+键盘导航,全方位提升应用可用性
flutter·华为·计算机外设·harmonyos
Hello__777714 小时前
开源鸿蒙 Flutter 实战|关于页面完善全流程实现
flutter·开源·harmonyos
Lanren的编程日记14 小时前
Flutter 鸿蒙应用列表性能优化实战:虚拟列表+分页加载+渲染优化,实现60fps丝滑滚动
flutter·华为·性能优化·harmonyos
Lanren的编程日记15 小时前
Flutter 鸿蒙应用游戏化元素实战:积分等级+成就解锁+排行榜,全方位提升用户粘性
flutter·游戏·华为·harmonyos
用户7349050784415 小时前
如何编写一个 GitHub 二步验证客户端?(附仓库地址及apk下载链接)
flutter