Question

我想创建一个只能沿圆环移动的可拖动圆。喜欢

我的想法是首先创建一个堆栈。此堆栈将有两个孩子。首先，将一个容器制成一个圆形，并以 GestureDetetor 作为其子级。第二个是另一个容器，它也是圆形的，并且半径较小（我认为这可能会掩盖 GestureDetector 的区域，我不希望该区域处于活动状态任何手势）。

我的代码就像

 Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Container(
          width: 200.0,
          height: 200.0,
          padding: EdgeInsets.all(1.0),
          decoration: BoxDecoration(
            color: Colors.yellow,
            shape: BoxShape.circle,
          ),
          child: Builder(
            builder: (context) {
              final handle = GestureDetector(
                onPanUpdate: _panHandler,
                child: Icon(
                  Icons.arrow_drop_down_circle,
                  size: 30.0,
                ),
              );
              return AnimatedBuilder(
                animation: valueListener,
                builder: (context, child) {
                  return Align(
                    alignment: Alignment(
                      (valueListener.value[0] * 2 - 1),
                      (valueListener.value[1] * 2 - 1),
                    ),
                    child: child,
                  );
                },
                child: handle,
              );
            },
          ),
        ),
        Container(
          height: 180.0,
          width: 180.0,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.green,
          ),
        ),
      ],
    );
  }

但是，此代码根本无法约束位置圆...

Answer 1

您可以使用 Transform.rotate 。它具有一个 origin 属性，该属性将帮助您旋转具有偏移量的小部件。您需要做的就是相应地更新Panupdate上的角度。下面是我用来创建此代码的代码

                          Transform.rotate(
                            origin: Offset(125, 0),
                            angle: torad(angle), //function to convert degree to radians
                            child: GestureDetector(
                              onPanUpdate: (dragUpdateDetails) {
                                BlocProvider.of<ABloc>(context)
                                    .add(Dragged()); //bloc event to update the position of draggable object as per your convenience
                              },
                              child: Container(
                                  height: 30,
                                  width: 30,
                                  child: CircularWidget(),
                                  color: Colors.transparent),
                            ),
                          ),

如何将可拖动对象约束在颤振环上？

1 个答案: