无法在Flutter Web应用程序中居中交互查看器和平移

bihw5rsg  于 2023-03-19  发布在  Flutter
关注(0)|答案(4)|浏览(104)

我尝试在interactiveviewer中显示图像列表,以便我可以在两个方向平移。即使放置在中心小部件中,interactiveviewer也是左对齐的。尝试将constrained属性设置为true,并添加了一个溢出框,与flutter源代码中一样在顶部中心对齐。但是,我无法平移图像列表并放大/缩小到旧位置。此问题仅在Flutter Web应用程序中存在。
请帮我解决这个问题。

Center(
        child: InteractiveViewer(
          constrained: false,
          child: Column(
            key: _columnKey,
            children: List<Widget>.generate(
                10, (int index) {
              return Image.asset('assets/image.png');
            }),
          ),
        ),
      )
iyfjxgzm

iyfjxgzm1#

有点晚了,但希望这对你有帮助,如果没有,其他人。
虽然InteractiveViewer与constrained: false的对齐方式似乎总是左上角(并且还没有对齐属性),但我使用了一种方法来居中子对象:

Center(
      child: InteractiveViewer(
          constrained: false,
          child: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Center(
                  child: Column(
                    key: _columnKey,
                    children: List<Widget>.generate(
                        10, (int index) {
                      return Image.asset('assets/image.png');
                    }),
                  ),
              ),
          ),
        ),
      )

基本上,您可以在交互式查看器(InteractiveViewer将位于左上角)中创建一个窗口大小的容器,然后在该容器中居中放置您想要的内容。
这是我对StackOverflow的第一个回答,所以如果有什么不对的话,请道歉。

6mw9ycah

6mw9ycah2#

根据Flutter团队的说法,这是“有意”的行为,您可以在InteractiveViewer小部件的代码中看到,它创建了一个对齐方式设置为左上角的OverflowBox。您可以在本地文件中注解掉这一点,以查看如果您这样做,InteractiveViewer是否会居中。然而,要真正使小部件正确居中,一个解决方案(就像我最后做的那样)是重新创建InteractiveViewer并编辑您需要的代码。
另请参阅:InteractiveViewer with constrained: false ignores Center widget and alignment #90517

rsaldnfx

rsaldnfx3#

在我的情况下工作:

InteractiveViewer(
            clipBehavior: Clip.none,
            minScale: myMinScale,
            maxScale: myMaxScale,
            constrained: false,
            child: SizedBox(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                child: buildImage(),
xuo3flqw

xuo3flqw4#

只需使用如下转换矩阵:

const zoomFactor = 1.0;
    final xTranslate = MediaQuery.of(context).size.width/2;
    final yTranslate = MediaQuery.of(context).size.height/4;

    var transformationController = TransformationController();
    transformationController.value.setEntry(0, 0, zoomFactor);
    transformationController.value.setEntry(1, 1, zoomFactor);
    transformationController.value.setEntry(2, 2, zoomFactor);
    transformationController.value.setEntry(0, 3, -xTranslate);
    transformationController.value.setEntry(1, 3, -yTranslate);    

    Center(
        child: InteractiveViewer(
          transformationController: viewTransformationController,
          constrained: false,
          child: Column(
            key: _columnKey,
            children: List<Widget>.generate(
                10, (int index) {
              return Image.asset('assets/image.png');
            }),
          ),
        ),
      )

相关问题