创建一个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),
                  ),
                ),
              ),
            ),
相关推荐
2601_9499706911 小时前
HumanizeDuration 跨端三方库仓颉适配全流程
前端·javascript·flutter
传奇开心果编程13 小时前
【Flutter踩坑排雷】第3课:const 误用坑|const 错误使用引发 UI 异常与性能损耗
flutter·移动开发·跨平台·dart·编程语言理论·编程框架·声明式ui
程序员老刘15 小时前
你的Flutter项目要不要紧急升级3.47.8?
flutter·客户端
Talyra4217 小时前
不想开会员,我写了一个记账 App
flutter
2601_9495758621 小时前
JSON5 跨端三方库仓颉适配全流程
前端·javascript·flutter
法的空间1 天前
AI 编程时代,为什么 Dart 分析会拖慢大型项目的开发
android·flutter·ios
恋猫de小郭1 天前
Flutter 紧急发布 3.47.8 安全升级版本,建议都升级
android·前端·flutter
好的佩奇2 天前
Dart 之模式
android·flutter·dart
淡淡的香烟2 天前
Flutter实现多语言切换
android·flutter·1024程序员节
事圆则缓2 天前
从零搭建一套 Flutter 架构:先跑通数据流
flutter