flutter 我无法使用矩阵手势检测器包拖动文本,它只在一个小区域拖动并消失

x8diyxa7  于 2023-03-13  发布在  Flutter
关注(0)|答案(1)|浏览(93)

我已经使用矩阵手势检测器包来拖动文本和图像,但似乎只有图像可以成功拖动,而文本拖动在一个小区域,使其消失。

class CustomOverlay extends StatelessWidget {
  final Widget child;
  const CustomOverlay({required this.child,Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final ValueNotifier<Matrix4> notifier = ValueNotifier(Matrix4.identity());
    return MatrixGestureDetector(
      onMatrixUpdate: (matrix, translationDeltaMatrix, scaleDeltaMatrix, rotationDeltaMatrix) {
        notifier.value=matrix;
      },
      child: AnimatedBuilder(
        animation: notifier,
        builder: (context, childWidget) {
          return Transform(
              transform: notifier.value,
              child: FittedBox(
                fit: BoxFit.contain,
                alignment: Alignment.center,
                child: child,
              )
          );
        },
      ),
    );
  }
}

这是使用矩阵手势检测器的自定义小部件

Text( 
 'Sample',
 style: TextStyle(
  color: Colors.white,
  ),                            
),

这是一个文本小部件,将在堆栈中使用

SizedBox(
                  height: size.height*0.5,
                  width: size.width,
                  child: Stack(
                    children: [
                      ColorFiltered(
                        colorFilter: ColorFilter.mode(hoodieColor, BlendMode.modulate),
                        child: Image.asset(apparelDesign[1]['image'],fit: BoxFit.cover,height: size.height*0.5,width: size.width,)
                      ),
                      Positioned(
                        bottom: size.height*0.2,
                        left: size.width*0.35,
                        child: Container(
                          height: size.height*0.225,
                          width: size.width*0.3,
                          decoration: BoxDecoration(
                            color: Colors.transparent,
                            border: Border.all(
                              color: Colors.black,
                              width: 1,
                            )
                          ),
                          child: Stack(
                            children: [
                              for(int i=0;i<customWidgets.length;i++)
                                customWidgets[i],
                            ],
                          ),
                        ),
                      )
                    ]
                  ),
                )

customWidget是小部件的列表,其中包括文本和图像,可以在容器周围拖动,该容器受到限制,因此小部件只能在容器内部拖动和放置
我希望文本能够在容器内自由移动(拖动),它应该适合容器内

7vux5j2d

7vux5j2d1#

我已经解决了这个问题。我已经使用约束盒代替了安装盒

class CustomOverlay extends StatelessWidget {
  final Widget child;
  final double? height;
  final double? width;
  const CustomOverlay({ this.height,this.width,required this.child,Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final ValueNotifier<Matrix4> notifier = ValueNotifier(Matrix4.identity());
    return MatrixGestureDetector(
      shouldScale: true,
      shouldRotate: false,
      onMatrixUpdate: (matrix, translationDeltaMatrix, scaleDeltaMatrix, rotationDeltaMatrix) {
        notifier.value=matrix;
      },
      child: AnimatedBuilder(
        animation: notifier,
        builder: (context, childWidget) {
          return Transform(
              transform: notifier.value,
              child: ConstrainedBox(
                constraints: BoxConstraints.expand(height: height,width: width),
                child: child,
              )
          );
        },
      ),
    );
  }
}

相关问题