创建一个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),
                  ),
                ),
              ),
            ),
相关推荐
风华圆舞19 小时前
在 Flutter 鸿蒙项目里接入语音识别的完整思路
flutter·语音识别·harmonyos
风华圆舞21 小时前
鸿蒙 + Flutter 下如何让 HarmonyOS 能力真正服务于 AI 体验
人工智能·flutter·harmonyos
BreezeDove1 天前
【Android】Flutter3.35项目启动超时问题
android·flutter
风华圆舞1 天前
鸿蒙 MICROPHONE 权限在 Flutter 项目里怎么处理
flutter·华为·harmonyos
愚者Pro2 天前
切换本地 Flutter SDK 版本
flutter
TT_Close2 天前
别再复制旧 Flutter 工程了,真正拖慢你的不是业务代码
flutter·npm·visual studio code
风华圆舞2 天前
鸿蒙 + Flutter 下 AI 助手为什么要支持流式输出
人工智能·flutter·harmonyos
风华圆舞2 天前
鸿蒙 + Flutter 下 AI 页面的状态协同设计
人工智能·flutter·harmonyos
风华圆舞2 天前
鸿蒙语音播报功能 的 Flutter 侧封装思路
flutter·华为·harmonyos
brycegao3212 天前
Flutter 国际化富文本解决方案:基于双层占位符的轻量化图文混排方案
flutter·国际化·i18n·富文本·rtl·移动端工程架构