Question

我正在交互式查看器中缩放图像，交互式查看器是容器的子级，为容器设置一些高度，在缩放图像后，视口中的特定位置，我无法滚动和缩放图像


 class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Zoom(),
      ),
    );
  }
}
class Zoom extends StatefulWidget
{
  @override
  MyStatelessWidget createState()=> MyStatelessWidget();
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends State<Zoom> {


  @override
  Widget build(BuildContext context) {
    return Center(
child:Container(height: 300,
      child: InteractiveViewer(

       scaleEnabled: true,maxScale: 4.0,
        child: Center(
         child:Container( child:Image.asset('Assets/Java-001.jpg',fit: BoxFit.cover,alignment: Alignment.center,)),
      ),
    )));
  }
}

我该如何解决这个问题？

Answer 1

尝试将以下参数添加到InteractiveViewer小部件中：

scrollToDiv() {
  document.getElementById('pricing').scrollIntoView({
    behavior: 'smooth',
  })
  var elements = document.getElementsByClassName('example-classname')
  for(let e of elements) e.classList.add('glow')
  var scrollTimeout
  clearTimeout(scrollTimeout)
  scrollTimeout = setTimeout(function () {
    for(let e of elements) e.classList.remove('glow')
  }, 2000)
}

Answer 2

如果您的小部件大于视口，您需要将 constrained 设置为 false。

<块引用>

constrained：如果设置为false，则子项将被赋予无限约束。当孩子应该比 InteractiveViewer 大时，这通常很有用。

InteractiveViewer(
  constrained: false, // Set it to false.
  child: YourContainer(...),
)

当交互式查看器是Container的子级时，交互式查看器缩放中的问题

2 个答案: