创建一个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),
                  ),
                ),
              ),
            ),
相关推荐
liulian09166 小时前
Flutter for OpenHarmony 跨平台开发:单位转换功能实战指南
flutter
千码君20167 小时前
Trae:一些关于flutter和 go前后端开发构建的分享
android·flutter·gradle·android-studio·trae·vibe code
maaath9 小时前
【maaath】Flutter for OpenHarmony 手表配饰应用实战开发
flutter·华为·harmonyos
maaath9 小时前
【maaath】Flutter for OpenHarmony 跨平台计算器应用开发实践
flutter·华为·harmonyos
maaath14 小时前
【maaath】Flutter for OpenHarmony 闹钟时钟应用开发实战
flutter·华为·harmonyos
maaath15 小时前
【maaath】Flutter for OpenHarmony 短信管理应用实战
flutter·华为·harmonyos
maaath16 小时前
【maaath】Flutter for OpenHarmony打造跨平台便签备忘录应用
flutter·华为·harmonyos
千码君201616 小时前
flutter:与Android Studio模拟器的调试分享
android·flutter
xmdy586617 小时前
Flutter+开源鸿蒙实战|智联邻里Day8 Lottie动画集成+url_launcher跳转拨号+个人中心完善+全局UI统一
flutter·开源·harmonyos
liulian09161 天前
Flutter for OpenHarmony 跨平台开发:颜色选择器功能实战指南
flutter