我怎样才能使一个图像上的点或(图像的一部分)点击Flutter？

cvxl0en2 于 2023-01-06 发布在 Flutter

关注(0)|答案(2)|浏览(159)

The problem is I have an web app with the below image and every blue point in that image i clickable by adding tag and detecting the coordinates on each point to assign a javascript function..

图像

我想用flutter开发这个屏幕，flutter中有这个功能吗？
请注意，我尝试过，但没有运气!

Widget build(BuildContext context) {
  return CustomPaint(
    painter: MultiClickableShapePainter(),
    child: Stack(
      children: [
        Image.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;
  }
}

有什么建议和解决办法吗？

flutter

来源：https://stackoverflow.com/questions/74992150/how-can-i-make-point-on-an-image-or-part-of-an-image-clickable-in-flutter

2条答案

按热度按时间

fxnxkyjh1#

尝试在Stack中使用Positioned来定位小圆
将Positioned的child放入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')),
            ))
      ],
    ));

输出：

赞(0）回复(0）举报 2023-01-06

fae0ux8s2#

InkWell小工具有一个child属性，你可以把你的Image小工具放在那里，它将是可点击的！

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hello, World!'),
      ),
      body: Center(
        child: InkWell(
          child: Image.network(
              'https://storage.googleapis.com/cms-storage-bucket/c823e53b3a1a7b0d36a9.png'),
          onTap: () {
            print('Touched on image');
          },
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-01-06

我来回答

我怎样才能使一个图像上的点或(图像的一部分)点击Flutter？

图像

2条答案

方法

代码

输出：

相关问题

热门标签

最新问答