es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo crear una imagen desplazable (vertical) y que se pueda hacer zoom con los dedos en las imágenes.

Cómo crear una imagen desplazable (vertical) y que se pueda hacer zoom con los dedos en las imágenes.

06 Aug, 2023 Programación

Quiero mostrar una lista de imágenes por las que puedo desplazarme verticalmente y puedo hacer zoom en la imagen. Puedo desplazar las imágenes pero no puedo hacer zoom en ellas.



class ScrollVertical extends StatefulWidget {
    @override
  _ScrollVerticalState createState() => _ScrollVerticalState();
}

class _ScrollVerticalState extends State<scrollvertical>  {
  double _scale = 1.0;
  double _previousScale = 1.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Column Layout"),
        backgroundColor: Colors.purple,
      ),

Aquí es donde se puede desplazar la lista de imágenes

      body: SingleChildScrollView(   //para desplazar las imágenes
        child: Column(
          children: <widget>[
            Padding(
              padding: EdgeInsets.only(bottom:30),
            ),
          InteractiveViewer(
            clipBehavior: Clip.none,
            minScale: 1,
            maxScale: 4,
            child: Image.asset("assets/imgs/chalkboard.png"), //primera imagen
          ),
          Padding(
              padding: EdgeInsets.only(bottom:30),
          ),

Esto será seguido por las siguientes imágenes.


      InteractiveViewer(
        clipBehavior: Clip.none,
        minScale: 1,
        maxScale: 4,
        child: Image.asset("assets/imgs/Gojo.png"),    //segunda imagen
      ),
      Padding(
          padding: EdgeInsets.only(bottom:30),
        ),

      InteractiveViewer(
        clipBehavior: Clip.none,
        minScale: 1,
        maxScale: 4,
        child: Image.asset("assets/imgs/Equations.png"),    //tercera imagen
      ),
      Padding(
          padding: EdgeInsets.only(bottom:30),
        ),
      ]
  ),
  ),
);

}

Utilizo InteractiveViewer para implementar el gesto de pellizco para hacer zoom, pero no funciona. ¿Es posible hacer esto?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible utilizar el widget InteractiveViewer para hacer zoom en imágenes. Sin embargo, en tu implementación actual, solo estás utilizando el widget InteractiveViewer para envolver cada imagen individualmente. Para habilitar la funcionalidad de pinch and zoom para toda la lista de imágenes, necesitas envolver toda la lista de imágenes en un solo widget InteractiveViewer. Aquí tienes un ejemplo de implementación:

    class ImageList extends StatefulWidget {
  @override
  _ImageListState createState() => _ImageListState();
}

class _ImageListState extends State<imagelist> {
  double _scale = 1.0;
  double _previousScale = 1.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Lista de Imágenes"),
      ),
      body: Center(
        child: InteractiveViewer(
          clipBehavior: Clip.none,
          minScale: 0.1,
          maxScale: 10.0,
          child: SingleChildScrollView(
            child: Column(
              children: [
                Image.asset('assets/imgs/image1.jpg'),
                Image.asset('assets/imgs/image2.jpg'),
                Image.asset('assets/imgs/image3.jpg'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

    En esta implementación, la lista de imágenes se envuelve en un SingleChildScrollView para habilitar el desplazamiento vertical, y luego todo el árbol de widgets se envuelve en un InteractiveViewer para habilitar la funcionalidad de pinch and zoom para toda la lista de imágenes. Las propiedades minScale y maxScale del widget InteractiveViewer se pueden ajustar para establecer las escalas mínima y máxima para el zoom.

Comments are closed.