Question

有没有一种方法可以在扑朔迷离中创建流程图或中继线？也许您有关于如何构建此对象的想法或示例。我当前的尝试是将一个元素拖放到适当位置，该方法也有效。但是现在我有一个问题，我无法将元素彼此连接。我已经尝试过失败的CustomPainter Baer

class _main extends State<Main> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
          title: Text('Stammbaum'),
          backgroundColor: Colors.pink),      
      body: Column(
        children: <Widget>[

          Container(
            decoration: BoxDecoration(
              border:Border.all(color: Colors.black, width: 0.3)
            ),
            child: Row(       

            children: <Widget>[


              Padding(
                padding: EdgeInsets.all(10),
                child:Draggable(
                  data: 1,
                  child: Icon(Icons.access_alarm),
                  feedback: Icon(Icons.access_alarm),
                  childWhenDragging: Icon(Icons.access_alarm),
                ), 
              ),
              Padding(
                padding: EdgeInsets.all(10),
                child: Draggable(
                data: 2,
                child: Icon(Icons.accessibility_new),
                feedback: Icon(Icons.accessibility_new),
                childWhenDragging: Icon(Icons.accessibility_new),
              ),  
              ),
              Padding(
                padding: EdgeInsets.all(10),
                child: Draggable(
                  data: 3,
                  child: Icon(Icons.delete),
                  feedback: Icon(Icons.delete),
                  childWhenDragging: Icon(Icons.delete),
                ),  
              ), 
            ],
          ),    
        ),   
          Column(
            children: <Widget>[
              ContentRow(),
              ContentRow(),
              ContentRow(),
              ContentRow(),
              ContentRow(),
              ContentRow(),
              ContentRow(),
              ContentRow(),
              ContentRow(),
            ],
          )             
        ],
      ),
    );
  } 
}

class ContentRow extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Content(),
        Content(),
        Content(),
        Content(),
        Content(),
        Content(),
        Content(),

      ],
    );
  }
}

  var p1;
  var p2;

class Content extends StatelessWidget{
  bool firstTap = true;
  var p1;
  var p2;

  @override
  Widget build(BuildContext context) {
      bool accepted = false;
      Icon dataIcon ;

   _onTapDown(TapDownDetails details) {
    var x = details.globalPosition.dx;
    var y = details.globalPosition.dy;
    if(firstTap ){
      p1 = Offset(x, y);
      firstTap = false;
    }else{
      p2 = Offset(x, y);
      firstTap=true;
      print("$p1 , $p2");

    }   
  }

    return GestureDetector(
       onTapDown: (TapDownDetails details) => _onTapDown(details),
      child:Container(

            width: 50.0,
            height: 50.0,              
            child: DragTarget(              
              builder: (context, List<int> candidateData, rejectedData) {
                print(candidateData);
                return accepted ? dataIcon : Container();
              },
              onWillAccept: (data) {
                return true;
              },
               onAccept: (data) {
               if(data==1){
                 accepted=true;
                  dataIcon = Icon(Icons.access_alarm);
               }
               if (data==2){
                 accepted=true;
                 dataIcon=Icon(Icons.accessibility_new);
               }
               if(data==3){
                 accepted=false;
                 dataIcon=null;
               }
              },              
            ),             
          ) ,
    ) ; 
  }
}

class MyPainter extends CustomPainter { //         <-- CustomPainter class
   @override
void paint(Canvas canvas, Size size) {
  final point1 = p1;
  final point2 =p2;
  final paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 2;
  canvas.drawLine(point1, point2, paint);
}

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

Answer 1

尝试使用Charts_flutter：^ 0.8.1 ,,在pub中找到它，还有不同图表的详细示例

有没有办法在扑朔迷离中创建流程图或中继？

1 个答案: