3

私はフラッターが初めてで、CustomPaint パスでジェスチャを検出する方法を見つけようとしています。他の多くのものはクリックできますが、何らかの理由でパスはクリックできません...どうすればこれを機能させることができますか? これまでの私のコードは以下のとおりです。

import 'package:flutter/material.dart';

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

class MbiraShapes extends StatefulWidget {
    @override
  _MbiraShapesState createState() => _MbiraShapesState();
}

class _MbiraShapesState extends State<MbiraShapes>{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Mbira Shapes',
        home: PathExample());
  }
}

class PathExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: KeyPathPainter(),
    );
  }
}

class KeyPathPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint lineDrawer = Paint()
      ..color = Colors.blue
      ..strokeWidth = 8.0;

    Path path = Path()
// Moves to starting point
      ..moveTo(50, 50)
      //draw lines passing through xc, yc to end at x,y
      ..quadraticBezierTo(77, 370, 50, 750)
      ..quadraticBezierTo(100, 775, 150, 750)
      ..quadraticBezierTo(110, 440, 75, 50);
    //close shape from last point
    path.close();
    canvas.drawPath(path, lineDrawer);

    Path path2 = Path()
// Moves to starting point
      ..moveTo(250, 50)
      //draw lines passing through xc, yc to end at x,y
      ..quadraticBezierTo(280, 350, 270, 675)
      ..quadraticBezierTo(290, 750, 350, 750)
      ..quadraticBezierTo(365, 710, 345, 600)
      ..quadraticBezierTo(320, 450, 270, 50);
    //close shape from last point
    path2.close();
    canvas.drawPath(path2, lineDrawer);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

以下のスニペットを GestureDetector で試しましたが、うまくいきません。リスナーを試してみましたが、onPointerMove に対してのみ onPointerDown に対する応答がありませんが、移動アクションではなくタップ アクションが必要です。 

@override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
  
        title: Text("widget.title)"),
      ),
      
      body: Center(
        child: GestureDetector(
          child: CustomPaint(
            painter: KeyPathPainter(),
            child: Container()),
          onTap: () {
            print("tapped the key");
          },
        ),
      ),
    );
  }

キーをタップして応答を得たいだけです。最終的には音になりますが、今のところ、onTapを機能させる方法を理解しようとしています。

4

5 に答える 5

0

CustomPaint の子が必要です

   @override
   Widget build(BuildContext context) {
     return CustomPaint(
       painter: KeyPathPainter(),
       child: Container(), // this line will solve the tap problem
    );
   }
于 2022-02-13T11:37:22.470 に答える