如何在颤振中缩放页面

时间:2021-03-30 17:42:56

标签: flutter

enter image description here

我想使用按钮来缩放我的页面,而不仅仅是图像

1 个答案:

答案 0 :(得分:0)

看起来你正在寻找这个,zoom_widget,但它使用了手势指令

Zoom(
    width: 1800,
    height: 1800,
    child: Center(
        child: Text("Happy zoom!!"),
    )
);

zoomer,使用控制器设置比例:

  ZoomerController _zoomerController = ZoomerController(initialScale: 1.0);
  String _zoomDetails = "Zoom";  

  @override
  Widget build(BuildContext context) {

    _zoomerController.onZoomUpdate((){
      setState(() {
        _zoomDetails = "Scale = "+ _zoomerController.scale.toStringAsFixed(2);
        _zoomDetails += "\nRotation = "+ _zoomerController.rotation.toStringAsFixed(2);
        _zoomDetails += "\nOffset = ("+ _zoomerController.offset.dx.toStringAsFixed(2)+","+_zoomerController.offset.dy.toStringAsFixed(2)+")";
      });
    });

    return Scaffold(
      appBar: AppBar(title: Text("Zommer Example"),),
      body:
        Center(child:
        Stack(
          children: [
            Align(alignment: Alignment.topCenter,child: SizedBox(height: 150,child: Text(_zoomDetails,textAlign: TextAlign.center,style: TextStyle(fontSize: 30),))),
            Center(
              child: 
                Zoomer(
                  enableTranslation: true,
                  enableRotation: true,
                  clipRotation: true,
                  maxScale: 2,
                  minScale: 0.5,
                  background:BoxDecoration(color: Colors.white),
                  height: 300,
                  width: 300,
                  controller: _zoomerController,
                  child: Container(decoration: BoxDecoration(color: Colors.green),height: 200,width: 200,child: FlutterLogo(),)),
            ),
          ])),
    );
  }
}