Изображение будет видно при постукивании во флаттере

Question

Я получаю сообщения с веб-сайта WordPress в приложение флаттера.

Каждое сообщение имеет 3 изображения, и это макет изображений

То, что я пытаюсь сделать, это когда я нажимаю на ИЗОБРАЖЕНИЕ 1 или ИЗОБРАЖЕНИЕ 2 или ИЗОБРАЖЕНИЕ 3, это изображение будет отображаться в ОСНОВНОМ ИЗОБРАЖЕНИИ.

Имеет ли это смысл?

Answer 1

Надеюсь, что приведенный ниже код поможет вам.в следующем коде я использовал сетевой образ, но вы также можете использовать изображения assert для.

  import 'package:flutter/material.dart';

  void main() => runApp(new Demo());

  class Demo extends StatefulWidget {
    @override
    _DemoState createState() => _DemoState();
  }

  class _DemoState extends State<Demo> with TickerProviderStateMixin {


    String image1 = "http://via.placeholder.com/350x150";
    String image2 = "http://via.placeholder.com/200x150";
    String image3 = "http://via.placeholder.com/200x150";
    String currentMainImage = "http://via.placeholder.com/350x150" ;
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: new Text("table demo"),
          ),
          body: new Container(
            child: new Column(
              children: <Widget>[
                Container(
                    height:150.0,
                    child: new Image.network(currentMainImage,fit: BoxFit.fill,)
                ),
                new Row(
                  children: <Widget>[
                    Expanded(
                      child: InkWell(
                        onTap : (){
                            setState(() {
                              currentMainImage = image1;
                            });
                        },
                        child: new Image.network(image1)
                       )
                    ),
                    Expanded(
                        child: InkWell(
                            onTap : (){
                              setState(() {
                                currentMainImage = image2;
                              });
                            },
                            child: new Image.network(image2)
                        )
                    ),
                    Expanded(
                        child: InkWell(
                            onTap : (){
                              setState(() {
                                currentMainImage = image3;
                              });
                            },
                            child: new Image.network(image3)
                        )
                    ),
                  ],
                )
              ],

            )
          )
        )
      );
    }
  }

Answer 2

• Вам нужно использовать виджет с сохранением состояния
• Вы можете использовать Column и Row для достижения этогомакет.
• И Image для отображения изображений в макете.
• Вы можете специально использовать конструктор Image.network(url) для отображения изображений изВаше слово нажмите на сайт.
• image1, image2 и image3 могут быть заключены в виджет InkWell.И InkWell onTap может иметь код для обновления url / изображения виджета Main Image в пределах setState()

Надеюсь, что это поможет!