如何在flutter中缩放容器

Question

我必须为容器制作这种类型的缩放效果，如何在没有任何包的情况下在颤振中使用。

如果使用交互式视图，则红色容器填充 20 不设置为常量，如果绿色缩放，则红色也缩放。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Container Layout'),
        ),
        body: Container(
          color: Colors.red, // Red container in full screen
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: InteractiveViewer(
            boundaryMargin: EdgeInsets.all(double.infinity),
            minScale: 0.1,
            maxScale: 4,
            child: Center(
              child: Padding(
                padding: EdgeInsets.all(20.0), // Padding of 20 on all sides for green container
                child: Container(
                  width: 200.0,
                  height: 200.0,
                  color: Colors.green, // Green container
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以在 GestureDetector 中使用 Transform.scale ，如下所示 交互式查看器。

double _scale = 1.0;

    GestureDetector(
            onScaleStart: (details) {
              setState(() {
                _scale = 1.0;
              });
            },
            onScaleUpdate: (details) {
              setState(() {
                _scale = details.scale.clamp(1.0, 4.0);
              });
            },
            child: Transform.scale(
              scale: _scale,
              child: Image.asset('assets/your_image.png'), 
            ),
          )