问题是,我有一个Web应用程序,上面有下面的图像和图像中的每个蓝点,我可以通过添加<map>标记并检测每个点上的坐标来分配一个Java脚本函数来点击.

图像

enter image description here

这个屏幕,我想用Ffltter来开发它,Ffltter中有这个功能吗?

请注意,我试过了,但没有成功!

Widget build(BuildContext context) {
  return CustomPaint(
    painter: MultiClickableShapePainter(),
    child: Stack(
      children: [
        图像.asset('assets/CarInspector.png'),
        InkWell(
          onTap: () {
            print('by');
          },
        ),
        InkWell(
          onTap: () {
            print('hi');
          },
        ),
      ],
    ),
  );
}
class MultiClickableShapePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Draw the first clickable shape on the canvas
    Paint paint1 = Paint()..color = Colors.red;
    Path path1 = Path();
    path1.addRect(const Rect.fromLTRB(150, 150, 250, 400));
    canvas.drawPath(path1, paint1);

    // Draw the second clickable shape on the canvas
    Paint paint2 = Paint()..color = Colors.blue;
    Path path2 = Path();
    path2.addRect(const Rect.fromLTRB(75, 75, 130, 200));
    canvas.drawPath(path2, paint2);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

有什么建议和解决方案吗?

推荐答案

try 在Stack内使用Positioned来定位小圆圈

Positionedchild放入InkWell

方法

Stack
 |_ Positioned    ???? Circle 1
   |_ InkWell
     |_ Text 
 |_ Positioned    ???? Circle 2
   |_ InkWell
     |_ Text 
 |_ Positioned    ???? Circle 3
   |_ InkWell
     |_ Text 
 |_ Positioned    ???? Circle 4
   |_ InkWell
     |_ Text 

代码


    return Scaffold(
        body: Stack(
      children: [
        Image.network(
            'https://th.bing.com/th/id/OIP.XU225Remieh8Qmb2HXf4AwHaEa?pid=ImgDet&rs=1'),
        Positioned(
            left: 220,
            bottom: 80,
            child: CircleAvatar(
              radius: 12,
              backgroundColor: Colors.blue,
              child: InkWell(
                  onTap: () {
                    print("Pressed 1");
                  },
                  child: const Text('1')),
            )),
        Positioned(
            right: 24,
            bottom: 140,
            child: CircleAvatar(
              radius: 12,
              backgroundColor: Colors.blue,
              child: InkWell(
                  onTap: () {
                    print("Pressed 2");
                  },
                  child: const Text('2')),
            )),
        Positioned(
            right: 230,
            top: 52,
            child: CircleAvatar(
              radius: 12,
              backgroundColor: Colors.blue,
              child: InkWell(
                  onTap: () {
                    print("Pressed 3");
                  },
                  child: const Text('3')),
            )),
        Positioned(
            left: 53,
            top: 89,
            child: CircleAvatar(
              radius: 12,
              backgroundColor: Colors.blue,
              child: InkWell(
                  onTap: () {
                    print("Pressed 4");
                  },
                  child: const Text('4')),
            ))
      ],
    ));

输出:

enter image description here

Flutter相关问答推荐

如何等待抖动S定时器.定期取消?

SingleChildScrollView正在将Container的高度限制为子对象,尽管使用了Expanded Inside Row()

错误:找不到字体功能类型.Ffltter Google_Fonts包错误

如何在Flutter 中播放音频

下拉图标未居中

如何在Flutter中显示ListView Builder区域外的列表数据?

reactive_flutter_BLE - 应用找到设备但无法连接(并读取 BLE 数据)

Firebase Auth - 有没有办法为新用户预先生成 UID?

如何从底部导航栏打开 bottomModal 表?

如何修复 ICU Lexing 错误:Flutter 中的意外字符

为什么将 bloc 提供程序放在单独的文件/类中会引发错误?

如何流畅切换画面?

如何将 List 转换为 String []?

如何扫描来自给定链接或按钮的重定向中的所有 URL?

Pub get 尚未运行

Flutter 如何使用 ClipPath 编辑容器的顶部?

如何在 Flutter 中将 ScaffoldMessenger 中的 Snackbar 显示为 Widget?

gridview 的所有按钮都应该在Flutter 中适合其父容器

为什么这个循环只发生一次?Flutter /dart

参数类型Future>不能分配给参数类型Future>?