在我的界面中,我有一排这样的容器

.

我的 idea 是,当我将手指放在这些容器上时,我手指下的那个会变大(以及其他变化,但这不是重点).

我知道如何使用GestureDetector,当我用"ONTAP"轻敲容器时,它会变大.但如果你按住手指并将其拖到另一个容器中,一切都不会改变.理想情况下,我希望能够检测到用户在touch 屏幕时将手指悬停在容器上.

如果有人能给我建议,我将不胜感激.提前谢谢您!

推荐答案

你可以在GestureDetector上用onVerticalDragUpdate.

class DraUILien extends StatefulWidget {
  const DraUILien({super.key});

  @override
  State<DraUILien> createState() => _DraUILienState();
}

class _DraUILienState extends State<DraUILien> {
  int? activeIndex;

  final double containerWidth = 30;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: GestureDetector(
        onVerticalDragUpdate: (details) {
          activeIndex =
              details.localPosition.dx ~/ (containerWidth + 16); //16 padding
          setState(() {});
        },
        child: SizedBox(
          height: 200,
          child: Row(
            children: List.generate(
              10,
              (index) => Padding(
                padding: const EdgeInsets.all(8.0),
                child: AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  color: index == activeIndex ? Colors.blue : Colors.grey,
                  width: containerWidth,
                  height: index == activeIndex ? 200 : 100,
                ),
              ),
            ),
          ),
        ),
      )),
    );
  }
}

玩弄逻辑,进行更多的定制.如果您需要ONTAP功能,请try 包含ONPAN Down

Flutter相关问答推荐

创建多个具有适当填充和对齐的按钮的最佳方法

壁炉有序在Flutter

如何在容器小部件中的图像旁边添加文本?

ReCAPTCHA Enterprise中的严重安全漏洞

我想在Flutter中画一个箭头,但我似乎无法填满空间

轻松本地化包翻译在底部导航栏项目标签Flutter 翼dart 中不起作用

Flutter 日期时间格式

为 flutter app/firebase 保存 chatgpt api-key 的正确方法是什么

如何使Flutter 边框宽度在外面而不是在里面?

在 Flutter 中,SpinEdit 叫什么?

无状态小部件被奇怪地重建

如何对齐卡片小部件中的图标按钮?

我可以定义一次 sharedPreferences 并在需要数据显示到 flutter 应用程序时调用它吗?

Flutter 构建方法使用的是旧版本的变量?

如何将金钱格式化为数以百万计的Flutter 动?

Getx Flutter 在更新值时抛出空错误

如何在Flutter 中将列表的模型类型转换为数组?

这在Flutter 的 pubspec 文件中是什么意思?

在Flutter 中将数字转换为印度文字样式

如何验证位于 PageView 内不同页面的 TextFormFields